window.onload = function () {
// Create a "Guangzhou" node, add it to #city under
myClick ("btn01", function () {
// Create Guangzhou node <li> Guangzhou </ li>
// Create li element Node
/ *
* document.createElement ()
* can be used to create an element node object,
* it requires a tag name as a parameter, and an element node object will be created based on the tag name,
* and the created object will be returned as the return value
* /
var li = document.createElement ("li");
// Create Guangzhou text node
/ *
* document.createTextNode ()
* Can be used to create a text node object
* Need a text content as a parameter, it will be based on the content Create a text node and return the new node
* /
var gzText = document.createTextNode ("Guangzhou");
// Set gzText to the child node of li
/ *
* appendChild ()
* -add a new node to a parent node Child node
*-Usage: parent node.appendChild (child node);
* /
li.appendChild (gzText);
// Get the node with id city
var city = document.getElementById ("city");
// Add Guangzhou to the city under
city.appendChild (li);
});
// Insert the "Guangzhou" node in front of #bj
myClick ("btn02", function () {
// Create a Guangzhou
var li = document.createElement ("li");
var gzText = document.createTextNode ("Guangzhou");
li.appendChild (gzText);
// Get id Bj node
var bj = document.getElementById ("bj");
// Get city
var city = document.getElementById ("city");
/ *
* insertBefore ()
* -you can insert a new one before the specified child node Child node
*
-Syntax : * Parent node. InsertBefore (new node, old node);
* /
city.insertBefore (li, bj);
});
// Use "Guangzhou"Node replacement #bjnode
myClick ("btn03", function () {
// Create a Guangzhou
var li = document.createElement ("li");
var gzText = document.createTextNode ("广州");
li.appendChild (gzText);
// Get the node with id bj
var bj = document.getElementById ("bj");
// Get city
var city = document.getElementById ("city");
/ *
* replaceChild ()
* -You can replace the existing child node with the specified child node
*-Syntax: parent node.replaceChild (New node, old node);
* /
city.replaceChild (li, bj);
});
// Delete #bj node
myClick ("btn04", function () {
// Get the node with id bj
var bj = document .getElementById ("bj");
// Get city
var city = document.getElementById ("city");
/ *
* removeChild ()
* -can delete a child node
* -Syntax : parent node.removeChild (child node);
*
* child node.parentNode.removeChild (child node);
* /
//city.removeChild(bj);
bj.parentNode.removeChild (bj);
});
/ / Read the HTML code in
#citymyClick ("btn05", function () {
// Get city
var city = document.getElementById ("city");
alert (city.innerHTML);
});
// Set #bj The HTML code
inside myClick ("btn06", function () {
// Get bj
var bj = document.getElementById ("bj");
bj.innerHTML = "Changping";
});
myClick ("btn07", function () {
// Add Guangzhou
var city = document.getElementById ("city"); to city
/ *
* InnerHTML can also be used to complete the addition, deletion and modification of the DOM
* Generally, we will use two methods in combination
* /
//city.innerHTML + = "<li> Guangzhou </ li>";
// Create a li
var li = document.createElement ("li");
// Set text to
lili.innerHTML = "Guangzhou";
// Add li to the city
city.appendChild (li);
});
};
function myClick (idStr, fun) {
var btn = document.getElementById (idStr);
btn.onclick = fun;
}
</ script>
< / head>
<body>
<div id = "total">
<div class = "inner">
<p>
Which city do you like?
</ p>
<ul id = "city">
<li id = "bj"> Beijing </ li>
<li> Shanghai </ li>
<li> Tokyo </ li>
<li> Seoul </ li>
</ ul>
< / div>
</ div>
<div id = "btnList">
<div> <button id = "btn01"> Create a "Guangzhou" node and add it under #city </ button> </ div>
<div> < button id = "btn02"> Insert "Guangzhou" node in front of #bj </ button> </ div>
<div> <button id = "btn03"> Replace #bj node with "Guangzhou" node </ button> < / div>
<div> <button id = "btn04"> Delete #bjnode </ button> </ div>
<div> <button id = "btn05"> Read the HTML code in #city </ button> < / div>
<div> <button id = "btn06"> Set the HTML code in #bj </ button> </ div>
<div> <button id = "btn07"> Create a "Guangzhou" node and add it under #city < / button> </ div>
</ div>