Can I insert elements to the beginning of an element using .appendChild()?
Solution 1
As well as appendChild
, DOM nodes have an insertBefore method
container.insertBefore(newFreeformLabel, container.firstChild);
Solution 2
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
Solution 3
Use Element.insert(element, content)
.
Solution 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')
});
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
.
Solid Rhino
Updated on July 09, 2022Comments
-
Solid Rhino almost 2 years
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 thecontainer
.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?
-
thomas-peter almost 12 yearsthe question is tagged prototypejs, so this really should be the correct answer.
-
starbeamrainbowlabs over 9 yearsNote that this also works if the container doesn't have any elements inside it to begin with.
-
danilo over 3 yearswith that solution you loose all events
-
Richard Aguirre about 3 yearsthis answer is working, the first answer not worked for me