Могу ли я вставлять элементы в начало элемента с помощью .appendChild ()?

Если пользователь выбирает вариант в раскрывающемся списке, должны быть добавлены метка и текстовое поле. Используя appendChild, эти элементы добавляются в конец container.

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

Проблема в том, что эти элементы следует вставлять в начало container, а не в конец.

Есть ли решение этой проблемы в PrototypeJS?


javascript html prototypejs
person Ivo Trompert    schedule 06.03.2009    source источник

Ответы (5)


arrow_upward
133
arrow_downward

Помимо appendChild, узлы DOM имеют метод insertBefore.

container.insertBefore(newFreeformLabel, container.firstChild);
person Gareth    schedule 06.03.2009
comment
Обратите внимание, что это также работает, если в контейнере изначально нет никаких элементов. - person starbeamrainbowlabs; 15.01.2015

arrow_upward
37
arrow_downward

Современное решение

Чтобы добавить дочерний элемент к началу родительского элемента, используйте prepend

parent.prepend(newChild)

Чтобы добавить в конец родительского элемента, используйте append

parent.append(newChild)

Кроме того, если вы хотите добавить относительно другого дочернего элемента, используйте один из них:

child1.after(newChild)  // [child1, newChild, child2]

child1.before(newChild) // [newChild, child1, child2]

Расширенное использование

  1. Вы можете передать несколько значений (или использовать оператор распространения ...).
  2. Любое строковое значение будет добавлено как текстовый элемент.

Примеры:

parent.prepend(newChild, "foo")  // [newChild, "foo", child1, child2]

const list = ["bar", newChild]
parent.append(...list, "fizz")  // [child1, child2, "bar", newChild, "fizz"]

Связанный метод DOM - child.replaceWith

Документация

Могу ли я использовать

person Gibolt    schedule 13.08.2017
comment
этот ответ работает, первый ответ не сработал для меня - person Richard Aguirre; 08.04.2021

arrow_upward
9
arrow_downward

Используйте Element.insert(element, content).

person Glavić    schedule 06.03.2009
comment
вопрос помечен как prototypejs, так что это действительно должен быть правильный ответ. - person thomas-peter; 26.07.2012

arrow_upward
1
arrow_downward 

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 от Prototype несколько неудобно для _3 _ / _ 4_. Например, если вы хотите поместить .spacer перед .textfield, позже в коде вам нужно будет сделать что-то вроде:

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

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

person eyelidlessness    schedule 06.03.2009

arrow_upward
0
arrow_downward

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

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

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

person jazkat    schedule 07.05.2012
comment
с этим решением вы теряете все события - person danilo; 31.12.2020