JavaScript HTML DOM 元素(节点)

本文介绍如何使用JavaScript操作HTML DOM元素,包括创建新元素并添加到现有文档中,以及如何删除已有的HTML元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如需向HTML DOM 添加新元素,必须创建该元素(元素节点),然后向一个已存在的元素追加该元素。

创建新的<p>元素:

var para = document.createElement("p");

如需向<p>元素添加文本,必须首先创建文本的节点。创建节点:

var node = document.createTextNode("这是一个新的段落。");

然后向<p>元素追加这个文本节点:

para.appendChild(node);

向已有的元素追加这个新的元素。

找到一个已有元素:

var element = document.getElementById("div1");

向已有元素追加新元素:

element.appendChild(para);

<html>
<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>

删除已有的HTML 元素

这个HTML是含有两个子节点(两个<p>元素)的<div>元素:

<div id = "div1">

<p id = "p1">这是一个段落。</p>

<p id = "p2">这是另一个段落。</p>

</div>

首先找到id = "div1"的元素:

var parent = getElementById("div1");

然后找到id = "p1"的元素:

var child = getElementById("p1");

从父元素中删除子元素:

parent.removeClild(child);

<html>
<body>
<div id = "div1">
    <p id = "p1">
        这是一个段落。
    </p>
    <p id = "p2">
        这是另一个段落。
    </p>
</div>
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>
</body>
</html>

有一点切记   要在那里加上documen    !!!



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值