web-dev-qa-db-ja.com

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

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要素の最初にアイテムを追加することです。

javascripthtmlprototypejs
32
Ivo Trompert

appendChildに加えて、DOMノードには insertBefore メソッドがあります

container.insertBefore(newFreeformLabel, container.firstChild);
96
Gareth

Element.insert（element、content） を使用します。

8
Glavić
_container.prepend(newChild);
_

これはES5で追加されました。これはVanilla JSで、現在、Chrome、FF、Operaを含む ブラウザの90％ で利用可能です。

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

リンク： developer.mozilla.org - Polyfill

3
Gibolt
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にとってはやや不自然だと思います。たとえば、後のコードで.spacerの前に.textfieldを配置する場合は、次のようにする必要があります。

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

これは、特にDOM APIのElement.insertBeforeに精通している場合、直感的ではないため、not.spacerを.textfieldに挿入しますが、代わりにcontainerに、前.textfieldに。

1
eyelidlessness

ガレスのソリューションを時間通りに見ていたら、私はそれを使っていたので、それで行くかもしれません：

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

prototypesのinsert（）関数がIE8でエラーを返していたため。

0
jazkat