Est-il possible d'insérer des éléments au début d'un élément en utilisant .appendChild()?

Question

Si l'utilisateur sélectionne une option dans une boîte de liste déroulante, une étiquette et un champ de texte doivent être ajoutés. En utilisant appendChild, ces éléments sont ajoutés à la fin du container.

var newFreeformLabel = document.createElement('label');
newFreeformLabel.innerHTML = 'Description:';

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

Le problème est que ces éléments devraient être insérés au début de container, pas à la fin.

Existe-t-il une solution à cela en PrototypeJS ?

Answer 1

Tout comme appendChild, les nœuds DOM ont une méthode insertBefore

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

Solution Moderne

Pour ajouter un enfant au début d'un parent, utilisez prepend

parent.prepend(newChild)

Pour ajouter à la fin d'un parent, utilisez append

parent.append(newChild)

De plus, si vous voulez ajouter par rapport à un autre enfant, utilisez l'une de ces méthodes:

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

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

Utilisation Avancée

1. Vous pouvez passer plusieurs valeurs (ou utiliser l'opérateur spread ...).
2. Toute valeur de chaîne de caractères sera ajoutée en tant qu'élément texte.

Exemples:

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

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

Méthode DOM associée - child.replaceWith

Documentation

Puis-je l'utiliser

Answer 3

Utilisez Element.insert(element, content).

Answer 4

container.
    insert({
        // la clé est la position
        // 'before', 'after', 'top' et 'bottom' sont autorisés
        top: new Element('label').
            update('Omschrijving:')
    }).
    insert({
        top: new Element('input').
            addClassName('textfield').
            writeAttribute('name', 'factuur_orderregel[]')
    }).
    insert({
        top: new Element('div').
            addClassName('spacer')
    });

Je pense que l'insertion de Prototype's Element.insert est assez maladroite pour before/after. Par exemple, si vous vouliez placer le .spacer avant le .textfield, plus tard dans votre code, vous devriez faire quelque chose comme:

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

Cela est, surtout si vous êtes familier avec le Element.insertBefore de l'API DOM, quelque peu contre-intuitif, car vous n'insérez pas le .spacer dans le .textfield, mais plutôt dans le container, avant le .textfield.

Answer 5

Si j'avais vu la solution de Gareth à temps, j'aurais peut-être opté pour cela, mais j'ai utilisé :

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

car la fonction insert() de Prototypes renvoyait une erreur dans IE8..