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

javascript html prototypejs
Ivo Trompert picture Ivo Trompert · Mar 6, 2009 · Viewed 85.9k times · Source

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?

Answer

Gareth picture Gareth · Mar 6, 2009

As well as appendChild, DOM nodes have an insertBefore method

container.insertBefore(newFreeformLabel, container.firstChild);

Related questions

How to autosize a textarea using Prototype?

I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address. Now I think it would look much nicer, if the textarea I'm …

Read More
How to return Element ID instead of [object HTMLDivElement] (Prototype.js)

I know this is simple, but I can't wrap my head around it. Currently the following code returns "[object HTMLDivElement],[object HTMLDivElement]" I'd like it to return "div1,div2". Any thoughts? Thanks guys. <HTML> <HEAD> <…

Read More
How do I select an option using prototype

Say I have a HTML form containing this select element: <select name="mySelect" id="mySelect"> <option value="1" id="option1">1</option> <option value="2" id="option2">2</option> </select> How can …

Read More