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

StackOverflow https://stackoverflow.com/questions/618089

  •  03-07-2019
  •  | 
  •  

質問

javascriptライブラリを使用してWebサイトを作成しています。ユーザーがドロップダウン（選択）ボックスでオプションを選択した場合、ラベルとテキストボックスを追加する必要があります。これは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要素の最初にアイテムを追加することです。

役に立ちましたか？

解決

appendChild と同様に、DOMノードには insertBefore メソッド

container.insertBefore(newFreeformLabel, container.firstChild);

他のヒント

container.prepend(newChild);

これはES5で追加されました。これはバニラJSであり、現在ブラウザの90％（Chrome、FFを含む） 、Opera。

さらに、 newFreeformLabel.after（newFreeformField）; を使用すると、必要に応じて順番に挿入できます。 .before もオプションです

リンク： developer.mozilla.org -ポリフィル 

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 に精通している場合、 .spacer ので、やや直感的ではありませんcode>を .textfield に、代わりに container に、 .textfield の前に。

ガレスの解決策を時間通りに見ていたら、私が使っていたように、それで行くかもしれません：

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

プロトタイプのinsert（）関数はIE8でエラーを返していました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top