Cómo anexar al niño antes. prototipo

Question

Estoy haciendo un sitio web con la biblioteca javascript. Si el usuario selecciona una opción en un cuadro desplegable (seleccionar), debe agregarse una etiqueta y un cuadro de texto. Esto lo hago con la opción appendChild. El único problema con la opción appenChild es que los elementos siempre se agregan después de los elementos en el elemento usado. Este es mi código:

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

Aquí el contenedor es el elemento donde se deben agregar los elementos. El único problema es que los elementos se agregan al final del elemento y quiero agregar los elementos al principio del elemento html.

Answer 1

Además de appendChild , los nodos DOM tienen un insertBefore método

container.insertBefore(newFreeformLabel, container.firstChild);

Answer 2

Utilice Element.insert (elemento, contenido) .

Answer 3

container.prepend(newChild);

Esto fue agregado en ES5. Es JS de vainilla y actualmente está disponible en 90% de los navegadores , incluido Chrome, FF , y Opera.

Además, newFreeformLabel.after (newFreeformField); le permitiría insertar en orden, si lo desea. .before también es una opción

Enlaces: developer.mozilla.org - Polyfill

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

Creo que el Element.insert de Prototype es un poco incómodo para antes / después de , sin embargo. Por ejemplo, si desea colocar .spacer antes de .textfield , más adelante en su código, deberá hacer algo como:

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

Esto es, especialmente si está familiarizado con el Element.insertBefore de la API DOM, algo poco intuitivo, ya que no está insertando el .spacer en el .textfield , pero en lugar del contenedor , antes del .textfield .

Answer 5

Si hubiera visto la solución de Gareth a tiempo, podría seguir con eso, tal como estaba:

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

cuando la función insert () de los Prototipos estaba devolviendo un error en IE8 ..