admin管理员组文章数量:1022853
Below code is working as expected.
CloneNode.js
<!DOCTYPE html>
<html>
<body>
<script src="../js/CloneNode.js">
function myFunction(){
var the_node = document.getElementById("myList").lastChild;
var the_clone = the_node.cloneNode(true);
document.getElementById("myList").appendChild(the_clone);
}
</script>
<ul id="myList">
<li>Good morning</li>
<li>Hello</li></ul>
<p>Click on the button to CloneNode()</p>
<button onclick = "myFunction()">Copy it!</button>
</body>
</html>
It is working fine for below code also :
<ul id="myList"><li>Good morning</li>
<li>Hello</li></ul>
OR
<ul id="myList"><li>Good morning</li><li>Hello</li></ul>
But when I enter newline before </ul> in above HTML code, like below, I didn't get the output. Hence, no addition of <li> element on the webpage.
<ul id="myList">
<li>Good morning</li>
<li>Hello</li>
</ul>
How can indentation in HTML code affect the output? Or is there anything that I've missed?
Below code is working as expected.
CloneNode.js
<!DOCTYPE html>
<html>
<body>
<script src="../js/CloneNode.js">
function myFunction(){
var the_node = document.getElementById("myList").lastChild;
var the_clone = the_node.cloneNode(true);
document.getElementById("myList").appendChild(the_clone);
}
</script>
<ul id="myList">
<li>Good morning</li>
<li>Hello</li></ul>
<p>Click on the button to CloneNode()</p>
<button onclick = "myFunction()">Copy it!</button>
</body>
</html>
It is working fine for below code also :
<ul id="myList"><li>Good morning</li>
<li>Hello</li></ul>
OR
<ul id="myList"><li>Good morning</li><li>Hello</li></ul>
But when I enter newline before </ul> in above HTML code, like below, I didn't get the output. Hence, no addition of <li> element on the webpage.
<ul id="myList">
<li>Good morning</li>
<li>Hello</li>
</ul>
How can indentation in HTML code affect the output? Or is there anything that I've missed?
Share Improve this question asked May 14, 2017 at 7:56 kanchankanchan 151 silver badge4 bronze badges2 Answers
Reset to default 5Element.lastChild returns TextNode nodes as well as Element nodes, the new line character is resolved as an empty TextNode when queried, so to make it work regardless, change
var the_node = document.getElementById("myList").lastChild;
to
var the_node = document.getElementById("myList").lastElementChild;
`try to put all of these within the same function as a local variables of that function.
- const new_item = getElementById(elementID) // element you want to clone.
- const cln = new_Item.cloneNode(true);
- getElementById(elementID).appendChild(cln) // that element to which you want to append a new clone.
// I declared and initialized 1 and 2 out of the function where 3 was present.`
Below code is working as expected.
CloneNode.js
<!DOCTYPE html>
<html>
<body>
<script src="../js/CloneNode.js">
function myFunction(){
var the_node = document.getElementById("myList").lastChild;
var the_clone = the_node.cloneNode(true);
document.getElementById("myList").appendChild(the_clone);
}
</script>
<ul id="myList">
<li>Good morning</li>
<li>Hello</li></ul>
<p>Click on the button to CloneNode()</p>
<button onclick = "myFunction()">Copy it!</button>
</body>
</html>
It is working fine for below code also :
<ul id="myList"><li>Good morning</li>
<li>Hello</li></ul>
OR
<ul id="myList"><li>Good morning</li><li>Hello</li></ul>
But when I enter newline before </ul> in above HTML code, like below, I didn't get the output. Hence, no addition of <li> element on the webpage.
<ul id="myList">
<li>Good morning</li>
<li>Hello</li>
</ul>
How can indentation in HTML code affect the output? Or is there anything that I've missed?
Below code is working as expected.
CloneNode.js
<!DOCTYPE html>
<html>
<body>
<script src="../js/CloneNode.js">
function myFunction(){
var the_node = document.getElementById("myList").lastChild;
var the_clone = the_node.cloneNode(true);
document.getElementById("myList").appendChild(the_clone);
}
</script>
<ul id="myList">
<li>Good morning</li>
<li>Hello</li></ul>
<p>Click on the button to CloneNode()</p>
<button onclick = "myFunction()">Copy it!</button>
</body>
</html>
It is working fine for below code also :
<ul id="myList"><li>Good morning</li>
<li>Hello</li></ul>
OR
<ul id="myList"><li>Good morning</li><li>Hello</li></ul>
But when I enter newline before </ul> in above HTML code, like below, I didn't get the output. Hence, no addition of <li> element on the webpage.
<ul id="myList">
<li>Good morning</li>
<li>Hello</li>
</ul>
How can indentation in HTML code affect the output? Or is there anything that I've missed?
Share Improve this question asked May 14, 2017 at 7:56 kanchankanchan 151 silver badge4 bronze badges2 Answers
Reset to default 5Element.lastChild returns TextNode nodes as well as Element nodes, the new line character is resolved as an empty TextNode when queried, so to make it work regardless, change
var the_node = document.getElementById("myList").lastChild;
to
var the_node = document.getElementById("myList").lastElementChild;
`try to put all of these within the same function as a local variables of that function.
- const new_item = getElementById(elementID) // element you want to clone.
- const cln = new_Item.cloneNode(true);
- getElementById(elementID).appendChild(cln) // that element to which you want to append a new clone.
// I declared and initialized 1 and 2 out of the function where 3 was present.`
本文标签： javascriptJS and HTMLcloneNode() isn39t workingStack Overflow
版权声明：本文标题：javascript - JS and HTML - cloneNode() isn't working - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745507882a2153689.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论