webentwicklung-frage-antwort-db.com.de

Erstellen eines div-Elements in einem div-Element in Javascript

Ich versuche ein sehr einfaches Beispiel für das Erstellen einer div in einer bereits vorhandenen div.

Es scheint nicht zu funktionieren, wenn ich benutze:

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

funktioniert aber gut, wenn ich das mache:

document.body.appendChild(element)

Muss ich die windows.onload-Funktion hinzufügen? Obwohl es auch dann nicht funktioniert! 

HTML Quelltext:

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

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

JS-Code:

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

Ihr Code funktioniert gut, Sie haben diese Codezeile nur falsch geschrieben:

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

Ändern Sie es mit diesem:

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

HIER IS MEIN BEISPIEL: 

<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' sollte in document.getElementById geänderter Code in Großbuchstaben sein 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

Ja, entweder onload oder in einem <script>-Tag after dem schließenden </body>-Tag, wenn sich das lc-Element bereits im DOM-Baum des Dokuments befindet.

0
Alexander Pavlov