JavaScript HTML DOM 节点

Posted 2022-12-28 jc2182

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript HTML DOM 节点相关的知识，希望对你有一定的参考价值。

要向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>

JavaScript HTML DOM 节点的增删改查

以上是关于JavaScript HTML DOM 节点的主要内容，如果未能解决你的问题，请参考以下文章

javascript笔记6-DOM

JavaScript HTML DOM 元素（节点）

JavaScript DOM

JavaScript Dom节点

JavaScript操作-DOM对象

8.5 HTML和JavaScript的DOM