HTML DOM|元素增删改
1.createElement()创建新的元素
如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建新元素</title>
<script>
function Fun(){
// 新建一个p标签
var x = document.createElement("p");
// 新建一个文本
var y = document.createTextNode("新的段落")
// 将y插入到x中
x.appendChild(y);
// 将新建的标签插入到body的最后
var z = document.body;
z.appendChild(x);
}
</script>
</head>
<body>
<button onclick="Fun()">创建新的段落</button>
<p>第一个段落</p>
<p>第二个段落</p>
</body>
</html>
点击按钮就会新建一个p标签:
2.insertBefore()创建新的元素
上一个例子中的 appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。如果想自定义位置,可以使用 insertBefore() 方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建新的元素</title>
<script>
function Fun(){
var x = document.createElement("p");
var y = document.createTextNode("新的段落");
x.appendChild(y);
var a = document.body;
var b = a.firstChild;
// 在body的第一个子节点前加入子节点
a.insertBefore(x,b);
}
</script>
</head>
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<button onclick="Fun()">创建新的段落</button>
</body>
</html>
这样操作就是在body的第一个子节点前新建一个节点了。
3.删除元素removeChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除已有元素</title>
<script>
function Fun(){
var x = document.body;
var y = document.getElementById("p1");
// 删除body的第一个p标签节点
x.removeChild(y);
}
</script>
</head>
<body>
<p id="p1">第一个段落</p>
<p>第二个段落</p>
<button onclick="Fun()">点击删除</button>
</body>
</html>
点击:
4.替换元素replaceChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换元素</title>
<script>
function Fun(){
var x = document.body;
var y = document.getElementById("p1");
var a = document.createElement("p");
var b = document.createTextNode("地球");
a.appendChild(b);
// 将x的y儿子替换为a
x.replaceChild(a,y);
}
</script>
</head>
<body>
<button onclick="Fun()">点击替换</button>
<p id="p1">太阳</p>
<p>月亮</p>
</body>
</html>
点击后:
人生没有白走的路,每一步都算数!