Javascriptを使用して要素を別の要素の前に追加する方法はありますか？

Question

これは私のサンプルである

..私はWikiを以下、ここで複数の質問に探してみましたが、私はまだのinsertBeforeに問題がある：

<div id="container"> 
<span id="first">1</span> 
<span id="second">2</span> 
<div id="third">3</div> 
<div id="forth">4</div> 
</div> 

<script> 
topbar = document.getElementsById("container"); 
boardlist = document.getElementsById("first"); 

bmcontainer = document.createElement("span"); 
bmcontainer.setAttribute("id", "zero"); 
bmcontainer.innerHTML("0"); 

topbar.inserBefore(bmcontainer, boardlist); 
</script> 

私はスパン前に、スパン＃ゼロを付加したいです＃最初。私は間違って何をしていますか？私はjQueryを使用しないようにしているので、私は完全にjavascriptのソリューションを探しています。

Answer 1

Node.insertBefore()です。

var insertedNode = parentNode.insertBefore(newNode, referenceNode); 

あなたはParent Nodeを持っている場合は、@は、完全なドキュメントと例のためのリンクを言及を見てみましょうParentNode.prepend()

ParentNode.prepend(nodesToPrepend); 

を使用する必要があります。

更新

あなたはあなたのコード（タイプミスとinnerHTMLの間違った使用法）でいくつかの問題があり、ここでは固定コードです。

HTML

<div id="container"> 
    <span id="first">1</span> 
    <span id="second">2</span> 
    <div id="third">3</div> 
    <div id="forth">4</div> 
</div> 

JS

var topbar = document.getElementById("container"), 
    boardlist = document.getElementById("first"), 
    bmcontainer = document.createElement("span"); 

bmcontainer.setAttribute("id", "zero"); 
bmcontainer.innerHTML = "0"; // innerHTML is not a function, it's a property 

topbar.insertBefore(bmcontainer, boardlist); 

jsfiddle

InnerHTMLが、それはpropertyだ、functionではないことに注意してください詳しくはこちらをご覧ください：Element.innerHTML

Answer 2

前に付加純粋なJavaScriptの

MDN article on insertBefore()

var el = document.getElementById('thingy'), 
    elChild = document.createElement('div'); 
elChild.innerHTML = 'Content'; 

// Prepend it 
el.insertBefore(elChild, el.firstChild); 

出典：またhttp://clubmate.fi/append-and-prepend-elements-with-pure-javascript/#Prepend

、jQueryの先頭に追加（）メソッド

あなたはそれについて読むことができますhereとhere。

Answer 3

insertAdjacentElement関数を使用できます。私はあなたがタイプミスがあると思う

var boardlist = document.getElementById("first"), 
    bmcontainer = document.createElement("span"); 
    bmcontainer.setAttribute("id", "zero"); 

    boardlist.insertAdjacentElement('beforebegin', bmcontainer); 

Element.insertAdjacentElement