Создание элемента div внутри элемента div в javascript

Я пытаюсь сделать очень простой пример создания div внутри уже существующего div.

Кажется, что он не работает, когда я использую:

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

но отлично работает, когда я это делаю:

document.body.appendChild(element)

Нужно ли добавить функцию windows.onload? Хотя это даже не работает!

Код HTML:

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

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

Код 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);
}

Ответ 1

Ваш код работает хорошо, вы просто ошиблись в этой строке кода:

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

измените его следующим образом:

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

ЗДЕСЬ МОЙ ПРИМЕР:

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

Ответ 2

'b' должно быть в заглавной букве в document.getElementById измененном коде 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);
 }

Ответ 3

Да, вам нужно либо сделать это onload, либо в теге <script> после закрытия тега </body>, когда элемент lc уже найден в дереве DOM документа.