web-dev-qa-db-fra.com

Création d'un élément div à l'intérieur d'un élément div en javascript

J'essaie un exemple très basique de création d'une div à l'intérieur d'une div déjà existante.

Il ne semble pas fonctionner quand j'utilise:

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

mais fonctionne bien quand je fais ceci:

document.body.appendChild(element)

Dois-je ajouter la fonction windows.onload? Bien que cela ne fonctionne pas, même alors! 

Code HTML:

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

    <div id="lc">  
    </div>
</body>

Code 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);
}
javascriptdomcreateelement
17
Komal Waseem

Votre code fonctionne bien, vous venez de mal saisir cette ligne de code:

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

changez-le avec ceci:

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

ICI IS MON EXEMPLE: 

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

30
Develoger

'b' doit être en majuscule dans document.getElementById code modifié 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);
 }
5
Anoop

Oui, vous devez soit faire ceci onload ou dans une balise <script> après la balise </body> de fermeture, lorsque l'élément lc est déjà trouvé dans l'arborescence DOM du document.

0
Alexander Pavlov