当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript HTML DOM 节点

JavaScript HTML DOM 节点

2019年10月06日  | 移动技术网IT编程  | 我要评论

要向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 节点的增删改查

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网