Seko AI短剧一键生成成片 updream 一键生成高质量推广成片立刻MV 低成本歌曲 MV、视频生成 Laper 剧本策划到成片协作

PHP MySQL jquery HTML CSS

HTML DOM 教程 HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM - 修改 HTML DOM - 修改 HTML 内容 HTML DOM - 元素 HTML DOM - 事件 HTML DOM 导航 HTML DOM总结 HTML DOM 实例 HTML DOM 对象

HTML DOM 教程

HTML DOM 教程 HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM - 修改 HTML DOM - 修改 HTML 内容 HTML DOM - 元素 HTML DOM - 事件 HTML DOM 导航 HTML DOM总结 HTML DOM 实例

DOM 参考手册

HTML DOM 对象

HTML DOM中文参考手册

更新时间2022-04-13

HTML DOM - 修改 HTML 内容 HTML DOM - 事件

添加、删除和替换 HTML 元素。

创建新的 HTML 元素 - appendChild()

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解析

这段代码创建了一个新的 <p> 元素：

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

如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：

var node=document.createTextNode("This is a new paragraph.");

然后您必须向 <p> 元素追加文本节点：

para.appendChild(node);

最后，您必须向已有元素追加这个新元素。

这段代码查找到一个已有的元素：

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

这段代码向这个已存在的元素追加新元素：

element.appendChild(para);

创建新的 HTML 元素 - insertBefore()

上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法：

实例

<html><!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

删除已有的 HTML 元素

如需删除 HTML 元素，您必须清楚该元素的父元素：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解析

这个 HTML 文档包含一个带有两个子节点（两个 <p> 元素）的 <div> 元素：

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

查找 id="div1" 的元素：

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

查找 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

	能否在不引用父元素的情况下删除某个元素？很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

实例

<html><!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

HTML DOM - 修改 HTML 内容 HTML DOM - 事件

相关视频

免费