Как добавить ребенка раньше. опытный образец

Я делаю сайт с библиотекой 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.

Ответ 1

Как и appendChild, узлы DOM имеют метод insertBefore

container.insertBefore(newFreeformLabel, container.firstChild);

Ответ 2

Используйте Element.insert(элемент, содержимое).

Ответ 3

container.prepend(newChild);

Это было добавлено в ES5. Это ванильный JS и в настоящее время доступен в 91% браузеров, включая Chrome, FF и Opera.

Кроме того, newFreeformLabel.after(newFreeformField); позволит вам вставить по порядку, если это необходимо. .before также является опцией

Ссылки: developer.mozilla.org - Polyfill

Ответ 4

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

Я думаю, что прототип Element.insert несколько неудобен для before/after. Например, если вы хотите поместить .spacer до .textfield, иногда в коде, вам нужно будет сделать что-то вроде:

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

Это особенно важно, если вы знакомы с DOM API Element.insertBefore, несколько неинтуитивными, так как вы не вставляете .spacer в .textfield, а вместо этого в container, до .textfield.

Ответ 5

Если бы я вовремя увидел решение Гарета, я мог бы пойти с этим, как я использовал:

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

поскольку функция insert() Prototypes возвращала ошибку в IE8..