JS insertBefore（）と文字列を渡すにはhtmlが含まれています

Question

私は要素の前に普通のjavascriptを挿入する方法を探しています。

私はフッター要素があります。

$(footer).before(string) 

：私は単にこれを行うだろうjQueryので

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

：

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

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

を、私はそれの前にHTMLを含むこの文字列を追加したいです

しかし、私はどのようにプレーンなjavascriptでそれを行うことができますか？文字列をNODEに変換して表示する方法は？

Answer 1

あなたが.insertAdjacentHTML('beforebegin', string)

を使用することができます

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

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

<footer>Footer</footer>

Answer 2

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); 

Answer 3

DOMにcreateElement()代わりのstring element creationで行うこの.Betterのように試してみてください

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>