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

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 (элемент, содержимое) .

Answer 3

container.prepend(newChild);

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

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

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

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

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

Answer 5

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

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

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