js元素节点的新增，修改，删除_js修改某个元素的父节点-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56008371/article/details/116896105

这篇博客详细介绍了如何使用JavaScript进行DOM操作，包括创建新的元素节点、在指定位置插入节点、删除节点、修改节点内容以及快速修改和删除节点的方法。示例代码清晰地展示了每个操作的实现步骤，对于前端开发者理解和操作网页元素非常有帮助。

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

1.创建元素节点

//新增元素节点
书写格式：document.createElement("元素名称");
 let pEle = document.createElement("p");

 //添加节点
 //书写格式：父元素节点.appendChild(子元素节点)
 let preEle = document.getElementById("container");
 preEle.appendChild(pEle);

2.插入节点

/**
 * 插入节点
 * 1、创建/获取:节点A
 * 2、获取节点B
 * 3、获取节点B的父元素
 * 4、父元素节点.insertBefore(节点A,节点B)
 */
例如：
//1.获取元素节点A
 let insertEle = document.getElementsByClassName("box3")[0];
// 2、获取节点B
let spanEle = document.getElementsByClassName("box2")[0];
 // 3、获取节点B的父元素
 let preEle = spanEle.parentElement;
 //4、父元素节点.insertBefore(节点A,节点B)
 preEle.insertBefore(insertEle, spanEle);

//appendChild
//注：添加已有元素，表示移动该元素到父节点的最后面
 let insertEle = document.getElementsByClassName("box3")[0];
 let spanEle = document.getElementsByClassName("box2")[0];
 insertEle.parentElement.appendChild(spanEle);

3.删除元素节点


/**
 * [方式1]
 * 1、获取删除的节点A
 * 2、获取删除节点A的父元素节点
 * 3、父元素节点.removeChild(节点A)
 */
 let spanEle = document.getElementsByClassName("box2")[0];
 spanEle.parentElement.removeChild(spanEle);

/**
 * [方式2]
 * 1、获取删除的节点A
 * 2、节点A.remove()
 */
 spanEle.remove();

4.修改节点

/**
 * 1、获取被修改的节点A
 * 2、创建修改后的节点B
 * 3、获取修改节点A的父元素节点
 * 4、父元素节点.replaceChild(节点B,节点A)
 */

 //1、获取被修改的节点A
let spanEle = document.getElementsByClassName("box2")[0];
// //2、创建修改后的节点B
let iEle = document.createElement("i");
let txtEle = document.createTextNode("我是i");
iEle.appendChild(txtEle);
 //3、获取修改节点A的父元素节点
//4、父元素节点.replaceChild(节点B,节点A)
spanEle.parentElement.replaceChild(iEle, spanEle);

5.快速修改、删除节点


/**书写格式：元素节点.innerText=修改的内容
 * innerText、innerHTML
 * 功能： 把元素内容替换字符串
 * 区别：
 * innerText无法识别字符串中的HTML标签（以字符串进行替换）
 * innerHTML可以识别字符串中的HTML标签（以元素节点进行替换）
 */