JavaScript HTML DOM 节点
程序员文章站
2022-07-02 13:06:16
要向HTML DOM添加新元素，必须首先创建元素（元素节点），然后将其附加到现有元素。 appendChild()上一个示例中的方法将新元素作为父项的最后一个子项附加。如果您不希望可以使用insertBefore()方法： 要将元素替换为HTML DOM，请使用以下replaceChild()方法： ......
要向html dom添加新元素，必须首先创建元素（元素节点），然后将其附加到现有元素。
<!doctype html>
<html>
<meta charset="utf-8">
<title>教程（jc2182.com）</title>
<body>
<div id="div1">
<p id ="p1">这是一个段落。</p>
<p id ="p2">这是另一段。</p>
</div>
<script>
var para = document.createelement("p");
var node = document.createtextnode("这是新的.");
para.appendchild(node);
var element = document.getelementbyid("div1");
element.appendchild(para);
</script>
</body>
</html>
appendchild()上一个示例中的方法将新元素作为父项的最后一个子项附加。如果您不希望可以使用insertbefore()方法：
<!doctype html>
<html>
<meta charset="utf-8">
<title>蝴蝶（jc2182.com）</title>
<body>
<div id="div1">
<p id ="p1">这是一个段落。</p>
<p id ="p2">这是另一段。</p>
</div>
<script>
var para = document.createelement("p");
var node = document.createtextnode("这是新的.");
para.appendchild(node);
var element = document.getelementbyid("div1");
var child = document.getelementbyid("p1");
element.insertbefore(para,child);
</script>
</body>
</html>
要将元素替换为html dom，请使用以下replacechild()方法：
<!doctype html>
<html>
<meta charset="utf-8">
<title>蝴蝶（jc2182.com）</title>
<body>
<div id="div1">
<p id ="p1">这是一个段落。</p>
<p id ="p2">这是另一段。</p>
</div>
<script>
var parent = document.getelementbyid("div1");
var child = document.getelementbyid("p1");
var para = document.createelement("p");
var node = document.createtextnode("这是新的.");
para.appendchild(node);
parent.replacechild(para,child);
</script>
</body>
</html>