Mixing
Creating a div element inside a div element in javascript
17
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);
}
javascript dom createelement
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
add a comment |
17
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);
}
javascript dom createelement
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
You might want to try firebug - makes it a little easier to spot typos in your code.
– Mike C
Sep 27 '12 at 13:35
add a comment |
17
17
17
3
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);
}
javascript dom createelement
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
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);
}
javascript dom createelement
javascript dom createelement
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
edited Sep 27 '12 at 13:41
I Hate Lazy
35.9k77372
35.9k77372
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
asked Sep 27 '12 at 13:24
Komal WaseemKomal Waseem
4212922
4212922
You might want to try firebug - makes it a little easier to spot typos in your code.
– Mike C
Sep 27 '12 at 13:35
add a comment |
You might want to try firebug - makes it a little easier to spot typos in your code.
– Mike C
Sep 27 '12 at 13:35
You might want to try firebug - makes it a little easier to spot typos in your code.
– Mike C
Sep 27 '12 at 13:35
You might want to try firebug - makes it a little easier to spot typos in your code.
– Mike C
Sep 27 '12 at 13:35
add a comment |
3 Answers
3
active
oldest
votes
30
Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this:
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 22 '18 at 10:46
Om Prakash Sao
1,2971128
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
1
That's clearly a typo in the question. He said his code works fine.
– I Hate Lazy
Sep 27 '12 at 13:35
I have added a working example so I think that I answered the whole question.
– Develoger
Sep 27 '12 at 13:36
1
He said it works fine when he appends to body, not to the div
– Mike C
Sep 27 '12 at 13:36
@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.
– I Hate Lazy
Sep 27 '12 at 13:37
This is working example of what he wanted: jsfiddle.net/8hZHk
– Develoger
Sep 27 '12 at 13:41
|
show 1 more comment
5
'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 '12 at 13:35
AnoopAnoop
19.3k94768
add a comment |
0
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 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12622465%2fcreating-a-div-element-inside-a-div-element-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
30
Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this:
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 22 '18 at 10:46
Om Prakash Sao
1,2971128
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
1
That's clearly a typo in the question. He said his code works fine.
– I Hate Lazy
Sep 27 '12 at 13:35
I have added a working example so I think that I answered the whole question.
– Develoger
Sep 27 '12 at 13:36
1
He said it works fine when he appends to body, not to the div
– Mike C
Sep 27 '12 at 13:36
@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.
– I Hate Lazy
Sep 27 '12 at 13:37
This is working example of what he wanted: jsfiddle.net/8hZHk
– Develoger
Sep 27 '12 at 13:41
|
show 1 more comment
30
Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this:
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 22 '18 at 10:46
Om Prakash Sao
1,2971128
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
1
That's clearly a typo in the question. He said his code works fine.
– I Hate Lazy
Sep 27 '12 at 13:35
I have added a working example so I think that I answered the whole question.
– Develoger
Sep 27 '12 at 13:36
1
He said it works fine when he appends to body, not to the div
– Mike C
Sep 27 '12 at 13:36
@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.
– I Hate Lazy
Sep 27 '12 at 13:37
This is working example of what he wanted: jsfiddle.net/8hZHk
– Develoger
Sep 27 '12 at 13:41
|
show 1 more comment
30
30
30
Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this:
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 22 '18 at 10:46
Om Prakash Sao
1,2971128
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this:
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><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><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 22 '18 at 10:46
Om Prakash Sao
1,2971128
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
edited Nov 22 '18 at 10:46
Om Prakash Sao
1,2971128
edited Nov 22 '18 at 10:46
Om Prakash Sao
1,2971128
edited Nov 22 '18 at 10:46
Om Prakash Sao
1,2971128
1,2971128
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
answered Sep 27 '12 at 13:33
DevelogerDeveloger
3,08911335
3,08911335
1
That's clearly a typo in the question. He said his code works fine.
– I Hate Lazy
Sep 27 '12 at 13:35
I have added a working example so I think that I answered the whole question.
– Develoger
Sep 27 '12 at 13:36
1
He said it works fine when he appends to body, not to the div
– Mike C
Sep 27 '12 at 13:36
@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.
– I Hate Lazy
Sep 27 '12 at 13:37
This is working example of what he wanted: jsfiddle.net/8hZHk
– Develoger
Sep 27 '12 at 13:41
|
show 1 more comment
1
That's clearly a typo in the question. He said his code works fine.
– I Hate Lazy
Sep 27 '12 at 13:35
I have added a working example so I think that I answered the whole question.
– Develoger
Sep 27 '12 at 13:36
1
He said it works fine when he appends to body, not to the div
– Mike C
Sep 27 '12 at 13:36
@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.
– I Hate Lazy
Sep 27 '12 at 13:37
This is working example of what he wanted: jsfiddle.net/8hZHk
– Develoger
Sep 27 '12 at 13:41
1
1
That's clearly a typo in the question. He said his code works fine.
– I Hate Lazy
Sep 27 '12 at 13:35
That's clearly a typo in the question. He said his code works fine.
– I Hate Lazy
Sep 27 '12 at 13:35
I have added a working example so I think that I answered the whole question.
– Develoger
Sep 27 '12 at 13:36
I have added a working example so I think that I answered the whole question.
– Develoger
Sep 27 '12 at 13:36
1
1
He said it works fine when he appends to body, not to the div
– Mike C
Sep 27 '12 at 13:36
He said it works fine when he appends to body, not to the div
– Mike C
Sep 27 '12 at 13:36
@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.
– I Hate Lazy
Sep 27 '12 at 13:37
@MikeC: Oh yes, you're right. I'm going to add some formatting to that question. It's a mess.
– I Hate Lazy
Sep 27 '12 at 13:37
This is working example of what he wanted: jsfiddle.net/8hZHk
– Develoger
Sep 27 '12 at 13:41
This is working example of what he wanted: jsfiddle.net/8hZHk
– Develoger
Sep 27 '12 at 13:41
|
show 1 more comment
5
'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 '12 at 13:35
AnoopAnoop
19.3k94768
add a comment |
5
'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 '12 at 13:35
AnoopAnoop
19.3k94768
add a comment |
5
5
5
'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 '12 at 13:35
AnoopAnoop
19.3k94768
'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 '12 at 13:35
AnoopAnoop
19.3k94768
answered Sep 27 '12 at 13:35
AnoopAnoop
19.3k94768
answered Sep 27 '12 at 13:35
AnoopAnoop
19.3k94768
answered Sep 27 '12 at 13:35
AnoopAnoop
19.3k94768
19.3k94768
add a comment |
add a comment |
0
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 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
add a comment |
0
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 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
add a comment |
0
0
0
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 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
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 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
answered Sep 27 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
answered Sep 27 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
answered Sep 27 '12 at 13:30
Alexander PavlovAlexander Pavlov
26.4k35683
26.4k35683
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f12622465%2fcreating-a-div-element-inside-a-div-element-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You might want to try firebug - makes it a little easier to spot typos in your code.
– Mike C
Sep 27 '12 at 13:35