Creating a div element inside a div element in javascript

Question

I m trying a very basic example of creating a div inside an already existing div   It doesn t seem to be working when I use   document getElementbyId  lc   appendChild element    but works fine when I do this   document body appendChild element    Do I need to add windows onload function  Though it doesn t work even then    HTML code    lt body gt       lt input id  filter  type  text  placeholder  Enter your filter text here    onkeyup    test      gt        lt div id  lc  gt         lt  div gt   lt  body gt    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

User · Accepted Answer

Your code works well you just mistyped this line of code:

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

change it with this: (The "B" should be capitalized.)

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

HERE IS MY EXAMPLE:

_x000D_

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

_x000D_

User · Answer

Yes  you either need to do this onload or in a  lt script gt  tag after the closing  lt  body gt  tag  when the lc element is already found in the document s DOM tree

User · Answer

b  should be in capital letter in document getElementById  modified code 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

[javascript] Creating a div element inside a div element in javascript

Examples related to javascript

Examples related to dom

Examples related to createelement