- 创建元素节点,document.createElement() 可以用来创建一个元素节点对象,这个方法需要一个标签名作为参数,根据标签名来创建元素节点对象,并将创建好的对象作为返回值返回。
- 例如创建一个li元素节点:
var li = document.createElement("li");
- 创建文本节点,document.createTextNode(),可以用来创建一个文本节点对象,需要一个文本内容作为参数,根据文本内容创建节点,并将创建的节点返回。
- 例如创建一个名为”广州“的文本节点
var gzText = document.createTextNode("广州");
-
将一个节点设置为另一个节点的子节点,appendChild(),可以向一个父节点中添加一个新的子节点。
用法:父节点.appendChild(子节点);
- 例如将以上创建的文本节点设置为li节点的子节点
li.appendChild(gzText);
- 在一个节点前面插入一个新元素节点,insertBefore(),可以在指定的子节点前插入新的节点,这个方法由父节点调用。用法:父节点.insertBefore(新节点,旧节点);
- 例如,将以上的广州节点插入到id为bj的子节点前面,假设他们的父节点是city
city.insertBefore(li,bj);
- 用新节点来替换旧节点,replaceChild(),可以用新创建的节点来替换掉原有的节点,此方法由父节点调用,用法:父节点.repaceChild(新节点,旧节点);
- 例如,用以上创建的广州节点来替换掉id为bj的子节点,假设city是他们的父节点
city.replaceChild(li,bj);
- 删除一个节点,removeChild(),此方法可以删除掉已存在的一个子节点,由父节点嗲用这个方法
- 例如,删除掉city父节点下的id为bj的子节点
city.removeChild(bj);
具体的练习如下:
在看以下代码的时候,要注意一点:使用下面的增、删、改对应的insertBefore()、removeChild()以及replaceChild(),他们对节点进行操作时,会影响到整个父节点,虽然是对个别节点进行操作,但是这几种方法会将原有的父节点删除再重新添加,也就相当于将原有的父节点刷新了一遍。
针对以上问题,可以考虑用innerTHML来与这几种方法结合使用,注意看代码中第一点之后的注释内容,之后的方法也都可以用innerHTML属性来进行相关的操作,避免对父元素的影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/dom.css"/>
<script type="text/javascript">
window.onload = function(){
//1.创建一个“广州”子节点,并将其添加到id为city的节点下
myClick("btn1",function()