Я могу вставить элементы в начало элемента с помощью .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?

31
задан TylerH 28 October 2019 в 19:58
поделиться

3 ответа

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

container.insertBefore(newFreeformLabel, container.firstChild);
104
ответ дан 27 November 2019 в 21:25
поделиться
9
ответ дан 27 November 2019 в 21:25
поделиться
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')
    });

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

1
ответ дан 27 November 2019 в 21:25
поделиться
Другие вопросы по тегам:

Похожие вопросы: