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:

<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);
}

ashleedawg · Accepted Answer · 2019-11-11 15:49:14Z

81

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:

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

edited Nov 11, 2019 at 15:49

ashleedawg

21.9k9 gold badges82 silver badges120 bronze badges

answered Sep 27, 2012 at 13:33

Develoger

3,9882 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

I Hate Lazy Over a year ago

That's clearly a typo in the question. He said his code works fine.

Develoger Over a year ago

I have added a working example so I think that I answered the whole question.

Mike C Over a year ago

He said it works fine when he appends to body, not to the div

I Hate Lazy Over a year ago

@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.

Komal Waseem Over a year ago

It was because of the typo. Ugghhh really annoyed at myself

Anoop · Accepted Answer · 2012-09-27 13:35:09Z

8

'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);
 }

answered Sep 27, 2012 at 13:35

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Comments

Alexander Pavlov · Accepted Answer · 2012-09-27 13:30:38Z

-2

Yes, you either need to do this onload or in a <script> tag after the closing </body> tag, when the lc element is already found in the document's DOM tree.

answered Sep 27, 2012 at 13:30

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

Collectives™ on Stack Overflow

Creating a div element inside a div element in javascript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related