Definition and Usage..
The appendChild() method appends a node as the last child of a node.
Tip: If you want to create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document.
Tip: Use the insertBefore() method to insert a new child node before a specified, existing, child node.
Syntax: node.appendChild(node)
CODING:The appendChild() method appends a node as the last child of a node.
Tip: If you want to create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document.
Tip: Use the insertBefore() method to insert a new child node before a specified, existing, child node.
Syntax: node.appendChild(node)
<!DOCTYPE html>
<html>
<body>
<ul id="List1"><li>C</li></ul>
<ul id="List2"><li>C++</li><li>JAVA</li><li>PYTHON</li><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li><li>ERLANG</li><li>SQL</li><li>XML</li></ul>
<button onclick="first()">ADD FIRST</button>
<button onclick="last()">ADD LAST</button>
<button onclick="title1()">Which Title</button>
<script>
var node;
function first() {
node = document.getElementById("List2").firstChild;
document.getElementById("List1").appendChild(node);
}
function last() {
node = document.getElementById("List2").lastChild;
document.getElementById("List1").appendChild(node);
}
function title1() {
var h2 = document.createElement("H2");
var t = document.createTextNode("Programming Languages");
h2.appendChild(t);
document.getElementById("List1").appendChild(h2);
//to add h2 in body tag document.body.appendChild(x);
//also define h2.innerHTML="text";and not used createTextNode() method
}
</script>
</body>
</html>
<html>
<body>
<ul id="List1"><li>C</li></ul>
<ul id="List2"><li>C++</li><li>JAVA</li><li>PYTHON</li><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li><li>ERLANG</li><li>SQL</li><li>XML</li></ul>
<button onclick="first()">ADD FIRST</button>
<button onclick="last()">ADD LAST</button>
<button onclick="title1()">Which Title</button>
<script>
var node;
function first() {
node = document.getElementById("List2").firstChild;
document.getElementById("List1").appendChild(node);
}
function last() {
node = document.getElementById("List2").lastChild;
document.getElementById("List1").appendChild(node);
}
function title1() {
var h2 = document.createElement("H2");
var t = document.createTextNode("Programming Languages");
h2.appendChild(t);
document.getElementById("List1").appendChild(h2);
//to add h2 in body tag document.body.appendChild(x);
//also define h2.innerHTML="text";and not used createTextNode() method
}
</script>
</body>
</html>
Comments
Post a Comment