CODEWITHSUNDEEP
javascripthtmlprototypejs
Solid Rhino
Solid Rhino

Reputation: 1895

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

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?

Upvotes: 113

Views: 156983

Answers (6)

Martin Tabakov
Martin Tabakov

Reputation: 1

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

Upvotes: 0

Gibolt
Gibolt

Reputation: 47197

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

  1. You can pass multiple values (or use spread operator ...).
  2. 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

Upvotes: 135

Glavić
Glavić

Reputation: 43572

Use Element.insert(element, content).

Upvotes: 11

jazkat
jazkat

Reputation: 5818

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..

Upvotes: 1

Gareth
Gareth

Reputation: 138110

As well as appendChild, DOM nodes have an insertBefore method

container.insertBefore(newFreeformLabel, container.firstChild);

Upvotes: 196

eyelidlessness
eyelidlessness

Reputation: 63529

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.

Upvotes: 1

Related Questions