¿Cómo usar correctamente innerHTML para crear un elemento (con posibles hijos) a partir de una cadena html?
Nota: lo hagoNO quiero usar cualquier marco.
El objetivo es simplemente crear una función que devuelva un elemento basado en una cadena HTML.
Asuma un documento HTML simple como tal:
<html>
<head></head>
<body>
</body>
</html>
Todas las funciones mencionadas se incluyen en la sección de cabecera y toda la creación / manipulación de DOM se realiza al final del cuerpo en una etiqueta de script.
Tengo una función createElement que toma una cadena HTML bien formada como argumento. Dice así:
function createElement(str)
{
var div = document.createElement('div');
div.innerHTML = str;
return div.childNodes;
}
Ahora esta función funciona muy bien cuando lo llamas así:
var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>');
Con el problema menor (posiblemente ENORME) de que el elemento creado no es un elemento 'verdadero', todavía tiene un ParentNode de 'div'. Si alguien sabe cómo solucionarlo, eso sería increíble.
Ahora si llamo a la misma función con una cadena más compleja:
var e = createElement('<p id="myId" class="myClass">innerHTML<h2 id="h2ID" class="h2CLASS">Heading2</h2></p>');
Crea DOS niños en lugar de UN niño con otro niño que tiene otro niño.
Una vez que lo haga div.innerHTML = str. InnerHTML en lugar de
`<p id="myId" class="myClass">innerHTML <h2 id="h2ID" class="h2CLASS">Heading2</h2> </p>`
recurre a
`<p id="myId" class="myClass">innerHTML</p> <h2 id="h2ID" class="h2CLASS">Heading2</h2>`
<p.myClass#myId>,<h2.h2CLASS#h2ID>, y otro<p>]