Cómo anexar un 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), se debe agregar 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 artículos. 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

Así como appendChild, nodos DOM tienen un insertBefore método

container.insertBefore(newFreeformLabel, container.firstChild); 

Answer 2

Use Element.insert(element, content).

Answer 3

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 Prototipo de Element.insert es un tanto incómodo para before/after, sin embargo. Por ejemplo, si desea colocar la .spacer antes de la .textfield, en algún momento más adelante en su código, lo que tendría que hacer algo como:

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

Esto es, sobre todo si está familiarizado con el de Element.insertBefore el DOM API, algo poco intuitivo, ya que son no insertar el .spacer en el .textfield, pero en su lugar en el container, antes la .textfield.

Answer 4

Si hubiera visto la solución de Gareth a tiempo, podría ir con eso, ya que era lo acostumbrado:

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

como inserto Prototipos() la función regresaba error en IE8 ..

Answer 5

container.prepend(newChild); 

Este fue agregado en ES5. Es vanilla JS y actualmente está disponible en 70% of browsers, incluidos Chrome, FF y Opera.

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

Enlaces: developer.mozilla.org-Polyfill