文章目录
目录
前言
大家好，我是遇见ice。
个人主页：遇见ice的博客
本文讲了JS HTML DOM中元素的创建并插入、删除、修改等内容。
走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。学一点，就会进步一点，大家一起加油呀！笔芯
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，首先必须创建该元素节点，然后把它追加到已有的元素上。
createElement() 方法
createElement() 方法通过指定名称创建一个元素
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
//用createElement创建一个p元素
var sec =document.createElement("p");
//创建一个文本节点
var node=document.createTextNode("这是一个新段落。");
//将文本节点添加到新创建的元素中
sec.appendChild(node);
//创建一个element对象获取div中的所有元素
var element=document.getElementById("div1");
//将添加过文本内容的p元素添加到element对象的子节点的末尾。
element.appendChild(sec);
</script>
</body>
</html>
注意：
1.createElement()创建了一个新的元素，参数是String类型的创建元素的名称
2.createElement()方法常和appendChild()一起用。createElement()方法创建元素后，一般用appendChild()加入内容。
appendChild() 方法
上述代码中用到的appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
appendChild() 方法如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。可以使用 appendChild() 方法移除元素到另外一个元素。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击按钮将项目从一个列表移动到另一个列表中</title>
</head>
<body>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li><li>Milk</li></ul>
<!--onclick是事件点击-->
<button onclick="myFunction()">点我</button>
<script>
//用函数进行此操作
function myFunction(){
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>
</body>
</html>
insertBefore()方法
前文案例中的appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。如果需要将新元素添加到开始位置，可以使用 insertBefore() 方法。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
//用createElement创建一个p元素
var sec =document.createElement("p");
//创建一个文本节点
var node=document.createTextNode("这是一个新段落。");
//将文本节点添加到新创建的元素中
sec.appendChild(node);
//创建一个element对象获取div中的所有元素
var element=document.getElementById("div1");
//创建一个child对象获取id为p1对应的元素
var child=document.getElementById("p1");
//在element中将新创建的并且加入文本节点之后的元素sec，插入到child元素前。
element.insertBefore(sec,child);
</script>
</body>
</html>
注意：
1. insertBefore() 方法是在被选元素前插入 HTML 元素。
2.如需在被选元素后插入 HTML 元素，使可用 insertAfter() 方法。
3.如果参数是已存在的元素，它将从它的当前位置被移除，并被插入在被选元素之前。
删除已有的 HTML 元素
removeChild()方法
删除使用的是removeChild()方法，参数是要删除的对象。返回值是removeChild前的那个父节点。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
//创建一个parent对象获取div中的所有元素
var parent=document.getElementById("div1");
//创建一个child对象获取id为p1对应的元素
var child=document.getElementById("p1");
//删除父元素parent下的某个子节点child
parent.removeChild(child);
</script>
</body>
</html>
注意:
1.如需删除 HTML 元素，您必须清楚该元素的父元素。DOM 需要了解您需要删除的元素，以及它的父元素，所以无法在不引用父元素的情况下删除某个元素。
2.如果不清楚父元素，可以先找到您需要删除的子元素，然后使用parentNode属性来查找其父元素
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
</script>
</body>
替换 HTML 元素
replaceChild()方法
使用 replaceChild() 方法来替换 HTML DOM 中的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
//用createElement创建一个p元素
var sec =document.createElement("p");
//创建一个文本节点
var node=document.createTextNode("这是一个新段落。");
//将文本节点添加到新创建的元素中
sec.appendChild(node);
//创建一个element对象获取div中的所有元素
var parent=document.getElementById("div1");
//创建一个child对象获取id为p1对应的元素
var child=document.getElementById("p1");
//在parent中将新创建的并且加入文本节点之后的元素sec，替换child元素。
parent.replaceChild(sec, child);
</script>
</body>
</html>
注意：
1.replaceChild() 方法可将某个子节点替换为另一个。新节点可以是文本中已存在的，或者是你新创建的。
2. 新节点是要插入的节点对象，括号内第一个。之前的节点是要移除的节点对象，括号内的后一个。
3.返回值为替换的新节点。
2718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
