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?

Answer 1

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>