JS insertBefore() and pass a string contains html

Question

I am looking for a way how I can insert things before an element in plain javascript.

I have a footer element:

//html
<footer>
  ...
</footer>

// js
var footer = document.querySelector('footer')

and I want to add this string containing html before it:

var string = "<div class='sun'><p>hi and more things</p>...</div>"

In jQuery I'd simply do this:

$(footer).before(string)

But how I can do it in plain javascript? How to convert the string to NODE and then display?

insertBefore() is the function you could use.

Fahad Nisar
– Fahad Nisar

2017-07-13 06:23:15 +00:00
Commented Jul 13, 2017 at 6:23 — Fahad Nisar
– Fahad Nisar, Commented Jul 13, 2017 at 6:23

Yury Tarabanko · Accepted Answer · 2017-07-13 06:27:43Z

2

You can use .insertAdjacentHTML('beforebegin', string)

var string = "<div class='sun'><p>hi and more things</p>...</div>"

document.querySelector('footer').insertAdjacentHTML('beforebegin', string);

<footer>Footer</footer>

answered Jul 13, 2017 at 6:27

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

prasanth · Accepted Answer · 2017-07-13 06:26:25Z

1

Try like this .Better do with createElement() instead of string element creation in dom

parentNode.insertBefore(newnode, existingnode)

var footer = document.querySelector('footer')

var string = document.createElement('div')
string.class='sun'
string.innerHTML ='<p>hi and more things</p>'

document.body.insertBefore(string,footer)

<footer>
  footer
</footer>

answered Jul 13, 2017 at 6:26

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

2 Comments

Petr Over a year ago

Thanks, just curious: Why is it better than using insertAdjacentHTML?

prasanth Over a year ago

i was mention with element creation not with insert function

Skribja · Accepted Answer · 2017-07-13 06:30:25Z

1

var fragment = document.createDocumentFragment();
fragment.innerHTML = "<div class='sun'><p>hi and more things</p>...</div>";
var footer = document.querySelector('footer');
document.body.insertBefore(fragment, footer);

edited Jul 13, 2017 at 6:30

answered Jul 13, 2017 at 6:21

Skribja

1611 silver badge5 bronze badges

Collectives™ on Stack Overflow

JS insertBefore() and pass a string contains html

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related