Quiero agregar un elemento con JavaScript.Agregar un elemento al DOM con JavaScript
tengo el siguiente código:
var collection = document.getElementsByTagName('body');
var a = document.createElement('div');
a.innerHTML = 'some text';
collection.item(0).firstChild.appendChild(a);
y HTML simple:
<html>
<head></head>
<body>
</body>
</html>
¿Dónde está error?
Esto debería hacer lo que busca:
var newdiv = document.createElement("DIV");
newdiv.appendChild(document.createTextNode("some text"));
document.body.appendChild(newdiv);
En primer lugar, se crea el elemento de document.createElement. Para establecer su contenido de texto, debe tener un "nodo de texto" que envuelva su texto. Entonces, primero crea ese nodo de texto y luego lo agrega como (el único) elemento secundario a su nuevo objeto.
A continuación, agregue su elemento DIV recién creado a la estructura DOM. No tiene que buscar el elemento BODY con getElementsByTagName(), ya que existe como una propiedad del objeto document.
Tu código está fallando porque, en el momento en que intentas insertar ese div nuevo, la etiqueta body está vacía y, por lo tanto, no hay firstChild para agregar nada. Cambiar la última línea a:
collection.item(0).appendChild(a);
pero fue sólo ejemplo, cuando voy a querer getElementsByTagName ('XYZ') y crear elemento createElement ('abc') y establecer innerHTML = "text" .... ¿Cómo puede ¿Yo hago eso? – john
Solo un aviso, siempre debe ir con 'documentFragment' al agregar elementos múltiples. 'documentFragment' actúa como un área de ensayo donde agrega elementos repetidamente y, por último, lo agrega al' DOM'. La adición repetida de elementos al 'DOM' provocará que el documento vuelva a fluir. Vea esto: http://ejohn.org/blog/dom-documentfragments/ –