Can I insert elements to the beginning of an element using .appendChild()?

Question

If the user selects an option in a dropdown box, there must be added a label and a textbox. Using appendChild, these elements get added to the end of the 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);

The issue is that these elements should be inserted at the beginning of container, not at the end.

Is there a solution to this in PrototypeJS?

score 182 · Accepted Answer · answered Mar 06 '09 at 09:30

182

As well as appendChild, DOM nodes have an insertBefore method

container.insertBefore(newFreeformLabel, container.firstChild);

answered Mar 06 '09 at 09:30

Gareth

133,157
36
148
157

13

Note that this also works if the container doesn't have any elements inside it to begin with. – starbeamrainbowlabs Jan 15 '15 at 12:11

Gibolt · Answer 2 · 2020-09-20T17:17:55.007

Modern Solution

To add a child to the beginning of a parent, use prepend

parent.prepend(newChild)

To add at the end of a parent, use append

parent.append(newChild)

In addition, if you want to add relative to another child, use one of these:

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

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

Advanced usage

You can pass multiple values (or use spread operator ...).
Any string value will be added as a text element.

Examples:

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

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

Related DOM method - child.replaceWith

Documentation

Can I Use

this answer is working, the first answer not worked for me – Richard Aguirre Apr 08 '21 at 19:13 — Richard Aguirre, Apr 08 '21 at 19:13

score 11 · Answer 3 · edited Oct 28 '19 at 19:56

11

Use Element.insert(element, content).

edited Oct 28 '19 at 19:56

TylerH

20,799
66
75
101

answered Mar 06 '09 at 08:50

Glavić

42,781
13
77
107

4

the question is tagged prototypejs, so this really should be the correct answer. – thomas-peter Jul 26 '12 at 12:23

score 1 · Answer 4 · answered Mar 06 '09 at 09:12

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

I think Prototype's Element.insert is somewhat awkward for before/after, however. For instance, if you wanted to place the .spacer before the .textfield, sometime later in your code, you would need to do something like:

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

This is, especially if you're familiar with the DOM API's Element.insertBefore, somewhat unintuitive, as you are not inserting the .spacer into the .textfield, but instead into the container, before the .textfield.

score 0 · Answer 5 · answered May 07 '12 at 11:46

0

If I had seen Gareth's solution on time, I might go with that, as it was I used:

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

as Prototypes' insert() function was returning error in IE8..

answered May 07 '12 at 11:46

jazkat

5,600
3
25
17

with that solution you loose all events – danilo Dec 31 '20 at 16:41

score 0 · Answer 6 · answered Mar 14 '23 at 14:00

0

You can add .k-multiselect .k-chip {order: 2} style. Example - https://dojo.telerik.com/uSOnIroB/4

answered Mar 14 '23 at 14:00

Martin Tabakov

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 19 '23 at 13:09
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/34033040) – SelVazi Mar 20 '23 at 09:02

Can I insert elements to the beginning of an element using .appendChild()?

6 Answers6

Modern Solution

Advanced usage

Linked

Related