子を前に追加する方法。プロトタイプ

Question

私はjavascriptライブラリでウェブサイトを作っています。ユーザーがドロップダウン（選択）ボックスでオプションを選択した場合は、ラベルとテキストボックスを追加する必要があります。これはappendChildオプションで行います。 appenChildオプションの唯一の問題は、使用される要素の項目の後に項目が常に追加されることです。これは私のコードです：

var newFreeformLabel = document.createElement('label'); 
newFreeformLabel.innerHTML = 'Omschrijving:'; 
var newFreeformField = document.createElement('input'); 
newFreeformField.className = 'textfield'; 
newFreeformField.name = 'factuur_orderregel[]'; 
var newFreeformSpacer = document.createElement('div'); 
newFreeformSpacer.className = 'spacer'; 

container.appendChild(newFreeformLabel); 
container.appendChild(newFreeformField); 
container.appendChild(newFreeformSpacer); 

ここでコンテナは、項目を追加する必要がある要素です。唯一の問題は、要素が要素の最後に追加され、要素をhtml要素の先頭に追加したいということです。

Answer 1

だけでなくappendChild、DOMノードがinsertBefore方法

container.insertBefore(newFreeformLabel, container.firstChild); 

Answer 2

Element.insert(element, content)を使用してください。

Answer 3

container. 
    insert({ 
     // key is position 
     // 'before', 'after', 'top' and 'bottom' are allowed 
     top: new Element('label'). 
      update('Omschrijving:') 
    }). 
    insert({ 
     top: new Element('input'). 
      addClassName('textfield'). 
      writeAttribute('name', 'factuur_orderregel[]') 
    }). 
    insert({ 
     top: new Element('div'). 
      addClassName('spacer') 
    }); 

私はPrototypeのElement.insertしかし、before/afterのため、多少厄介だと思います。あなたがいつか後のコードで、.textfield前.spacerを配置したい場合たとえば、あなたのような何かをする必要があります：

container. 
    down('.textfield'). 
    insert({ 
     before: new Element('div'). 
      addClassName('spacer') 
    }); 

これは、あなたがDOM APIのElement.insertBeforeに精通している場合は特に、ですではなくが.textfieldに挿入されますが、、、、.textfieldの順に挿入されます。

$('toggle_product').innerHTML = insertContent + $('toggle_product').innerHTML; 

：私は時間にガレスのソリューションを見ていた場合

Answer 4

を持って、それは私が使用したとして、私は、それと行くかもしれませんプロトタイプのinsert（）関数がIE8でエラーを返していたためです。

Answer 5

container.prepend(newChild); 

これはES5に加えた。これはvanilla JSで、現在Chrome、FF、Operaなど70% of browsersで利用できます。

さらに、newFreeformLabel.after(newFreeformField);は、必要に応じて挿入することができます。 Polyfill