# 创建节点
有的时候，我们需要往页面动态的添加文档元素（节点），比如根据省份的不同展现不同的城市列表，在添加节点之前需要先创建该节点。
# 创建节点
document.createElement("tagName") 用来创建一个新的 Element 节点（即文档元素），返回值是新创建的节点， tagName 是标签的名字，比如 a 、 p 、 img 等，需要注意的是它不区分大小写。
比如创建一个新的超链接节点：
var newA = document.createElement("a");// 创建超链接节点 | |
newA.src = "https://www.educoder.net";// 设置超链接的目的地址 |
# 示例
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
</head> | |
<body> | |
<p></p> | |
<script> | |
<!-- 请在此处编写代码 --> | |
<!---------Begin---------> | |
var newNode = document.createElement("form"); | |
newNode.method = "post"; | |
newNode.id = "myForm"; | |
<!---------End---------> | |
document.body.appendChild(newNode); | |
console.log(newNode.method); | |
</script> | |
</body> | |
</html> |
# 插入节点
插入节点：插入一个新的文档元素。
最常见的应用就是在 <select> 标签里插入一个新的 <option> 标签。
两种可选的方法：
# 方法 1 appendChild()
node1.appendChild(node2) 表示将 node2 插入到 node1 的最后一个子节点中。
比如原来的选择框是这样：
<select id="s1"> | |
<option id="cs">长沙</option> | |
<option id="zz">株洲</option> | |
</select> |
要把它变成这样
<select id="s1"> | |
<option id="cs">长沙</option> | |
<option id="zz">株洲</option> | |
<option >湘潭</option> | |
</select> |
实现代码如下：
var node1 = document.getElementById("s1"); | |
var node2 = document.createElement("option"); | |
node2.innerText = "湘潭"; | |
node1.appendChild(node2); |
# 方法 2 insertBefore()
pNode.insertBefore(node1,node2) ：将 node1 插入作为 pNode 的子节点，并且 node1 排在已存在的子节点 node2 的前面。
比如要把最开始的复选框变成这样：
<select id="s1"> | |
<option id="cs">长沙</option> | |
<option>湘潭</option> | |
<option id="zz">株洲</option> | |
</select> |
我们需要像下面这样操作节点:
var pNode = document.getElementById("s1"); | |
var node1 = document.createElement("option"); | |
node1.innerText = "湘潭"; | |
var node2 = document.getElementById("zz"); | |
// 将内容为 "湘潭" 的节点插入到内容为 "株洲" 的节点前面 | |
pNode.insertBefore(node1,node2); |
# 示例
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
</head> | |
<body> | |
<ul id="ul1"> | |
<li>America</li> | |
<li>Mexio</li> | |
</ul> | |
<script> | |
<!-- 请在此处编写代码 --> | |
<!---------Begin---------> | |
var newNode = document.createElement("li"); | |
newNode.innerText = "Canada"; | |
document.getElementById("ul1").appendChild(newNode); | |
<!---------End---------> | |
var out = document.getElementsByTagName("li")[2]; | |
console.log(out.innerText); | |
</script> | |
</body> | |
</html> |
# 删除节点
这里的删除节点指的是：父元素删除自己的子元素。
# 删除节点
删除节点的方法是 removeChild() ，调用者是父节点，参数是子节点，作用是删除这个子节点。
下面是一个无序列表的代码：
<ul id="parent"> | |
<li>提子</li> | |
<li>车厘子</li> | |
<li id="child3">荔枝</li> | |
</ul> |
如果我们要删除第三行，可以这样操作：
第一步：获取父节点，即 ul 节点：
var parentNode = document.getElementById("parent"); |
第二步：获取待删除的子结点：
var childNode = document.getElementById("child3"); |
第三步：父节点调用 removeChild() 方法删除子节点：
parentNode.removeChild(childNode); |
# 示例
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
</head> | |
<body> | |
<ol id="browser"> | |
<li id="chrome">Chrome</li> | |
<li id="firefox">Firefox</li> | |
<li id="opera">Opera</li> | |
<li id="safari">Safari</li> | |
</ol> | |
<script> | |
<!-- 请在此处编写代码 --> | |
<!---------Begin---------> | |
var parent = document.getElementById("browser"); | |
var child = document.getElementById("opera"); | |
parent.removeChild(child); | |
<!---------End---------> | |
</script> | |
</body> | |
</html> |
# 替换节点
一般来说，替换节点 = 删除节点 + 新增节点，可以用前面介绍的知识结合起来实现，当然，js 提供了 replaceChild() 方法一次完成替换。
replaceChild(a,b) 的调用者是要被替换的节点的父节点， a 是新的节点， b 是被替换的节点。
以无序列表为例：
<ul id="parent"> | |
<li id="child1">黄山</li> | |
<li id="child2">庐山</li> | |
<li id="child3">泰山</li> | |
</ul> |
要替换掉第三个子节点，过程如下：
第一步，获取父节点：
var parNode = document.getElementById("parent"); |
第二步，获取要被替换的子节点：
var oldNode = document.getElementById("child3"); |
第三步，创建新节点：
var newChild = document.createElement("li"); | |
newChild.innerText = "武夷山"; |
第四步，替换：
parNode.replaceChild(newChild,oldNode); |
# 示例
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
</head> | |
<body> | |
<ol id="parent"> | |
<a id="old" href="https://www.google.com">Google</a> | |
</ol> | |
<script> | |
var newChild = document.createElement("a"); | |
newChild.innerText = "eduCoder"; | |
newChild.href = "https://www.educoder.net"; | |
<!-- 请在此处编写代码 --> | |
<!---------Begin---------> | |
var parent = document.getElementById("parent"); | |
var old = document.getElementById("old"); | |
parent.replaceChild(newChild,old); | |
<!---------End---------> | |
</script> | |
</body> | |
</html> |
# 下拉列表的级联
下拉框
它有三列，每一列都会根据前一列的结果动态的改变自己的可选项，称为下拉框的级联，
第一步：静态的 HTML 的代码如下（简单起见，只考虑前两列）：
<select id="province" onChange="changeCity()"> | |
<option value="BeiJing" id="bj">北京</option> | |
<option value="AnHui" id="ah">安徽</option> | |
</select> | |
<select id="city"> | |
<option value="BeiJingCity">北京市</option> | |
</select> |
select 表示选择框， option 表示选择框里面的每一个选项， onChange="changeCity()" 表示一旦改变当前的选项，就会触发 JavaScript 函数 changeCity() 的执行。
第二步：获取两个选择框对应的节点元素
（以下的所有代码都是 changeCity() 函数里面的内容）：
var province = document.getElementById("province"); | |
var city = document.getElementById("city"); |
province 变量代表第一列的选择框， city 变量代表第二列的选择框。
第三步：清空第二列中的所有内容；
根据第一列的选择结果改变第二列的内容，就是根据父节点的不同替换不同的子节点，我们采用先删除后新增的方法实现替换：
var length = city.children.length; | |
for(var i = length-1;i >= 0;i--) { | |
city.removeChild(city.children[i]); | |
} |
在 for 循环里面，依次删除 city 节点下面的所有子节点。
需要注意的是，每删除一个子节点后，表示子节点个数的属性 city.children.length 都会自动减 1，所以我们需要在 for 循环开始之前索取子节点的长度。
第四步：根据父节点的不同新增不同的子节点：
if(province.value == "BeiJing") { | |
var child1 = document.createElement("option"); | |
child1.value ="BeiJingCity"; | |
child1.innerText="北京市" | |
city.appendChild(child1); | |
} else { | |
var child1 = document.createElement("option"); | |
child1.value="HuangShanCity"; | |
child1.innerText="黄山市"; | |
city.appendChild(child1); | |
} |
province.value 表示第一列选中的选项的值，即选中的 <option> 的 value 的值。
如果第一列选择的是北京，我们需要增加一个选项为北京市的 option 节点，这个节点将作为 city 的子节点。如果第一列选择的是安徽，我们需要增加一个选项为黄山市的 option 节点，这个节点将作为 city 的子节点。
value 属性表示 option 标签的值， innerText 表示 option 标签呈现出来的值。
# 示例
<html> | |
<head> | |
<title>myTitle</title> | |
</head> | |
<body> | |
<select id="province" onChange="changeCity()"> | |
<option value="BeiJing" id="bj">北京</option> | |
<option value="AnHui" id="ah">安徽</option> | |
</select> | |
<select id="city"> | |
<option value="BeiJingCity">北京市</option> | |
</select> | |
<script> | |
function changeCity() { | |
var province = document.getElementById("province"); | |
var city = document.getElementById("city"); | |
var length = city.children.length; | |
for(var i = length-1;i >= 0;i--) { | |
city.removeChild(city.children[i]); | |
} | |
if(province.value == "BeiJing") { | |
var child1 = document.createElement("option"); | |
child1.value="BeiJingCity"; | |
child1.innerText="北京市" | |
city.appendChild(child1); | |
} else { | |
var child1 = document.createElement("option"); | |
child1.value="HuangShanCity"; | |
child1.innerText="黄山市"; | |
city.appendChild(child1); | |
// 请在此处编写代码 | |
/*********Begin*********/ | |
var child2 = document.createElement("option"); | |
child2.value="HeFeiCity"; | |
child2.innerText="合肥市"; | |
city.appendChild(child2); | |
/*********End*********/ | |
} | |
} | |
</script> | |
</body> | |
</html> |
