significado hacer etiqueta elementos ejemplos div dinamicamente crear como javascript dom createelement

hacer - Crear un elemento div dentro de un elemento div en javascript



div significado (3)

Estoy intentando un ejemplo muy básico de crear un div dentro de un div ya existente.

No parece estar funcionando cuando uso:

document.getElementbyId(''lc'').appendChild(element)

pero funciona bien cuando hago esto:

document.body.appendChild(element)

¿Debo agregar la función windows.onload ? ¡Aunque no funciona incluso entonces!

Código HTML:

<body> <input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" /> <div id="lc"> </div> </body>

Código JS:

function test() { var element = document.createElement("div"); element.appendChild(document.createTextNode(''The man who mistook his wife for a hat'')); document.getElementbyId(''lc'').appendChild(element); //document.body.appendChild(element); }


''b'' debe estar en mayúscula en document.getElementById código modificado jsfiddle

function test() { var element = document.createElement("div"); element.appendChild(document.createTextNode(''The man who mistook his wife for a hat'')); document.getElementById(''lc'').appendChild(element); //document.body.appendChild(element); }


Sí, debe hacer esto onload o en una etiqueta <script> después de la etiqueta de cierre </body> , cuando el elemento lc ya se encuentra en el árbol DOM del documento.


Tu código funciona bien, simplemente escribiste mal esta línea de código:

document.getElementbyId(''lc'').appendChild(element);

cámbialo con esto:

document.getElementById(''lc'').appendChild(element);

AQUÍ ES MI EJEMPLO:

<html> <head> <script> function test() { var element = document.createElement("div"); element.appendChild(document.createTextNode(''The man who mistook his wife for a hat'')); document.getElementById(''lc'').appendChild(element); } </script> </head> <body> <input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" /> <div id="lc" style="background: blue; height: 150px; width: 150px; }" onclick="test();"> </div> </body> </html>