JS实现添加,替换,删除节点元素的方法

要实现JS对节点元素的添加、替换、删除，可以使用DOM操作相关API。

添加节点元素

可以使用createElement()方法创建新的节点元素，并使用appendChild()方法将其添加到指定的父元素下。

// 创建新的节点元素
var newElement = document.createElement('p');

// 设置节点文本
newElement.innerText = '这是一个新的段落元素';

// 获取要添加到的父元素
var parentElement = document.getElementById('container');

// 将新节点添加到父元素下
parentElement.appendChild(newElement);

以上代码会创建一个新的\

元素，设置节点文本内容，然后将其添加到id为'container'的元素下。

另外，如果要添加一个已经存在的元素，在parentNode.insertBefore()方法中指定插入的位置即可。

// 获取待插入元素
var insertElement = document.getElementById('insert');

// 获取父元素
var parentElement = document.getElementById('container');

// 获取参考节点
var referenceElement = document.getElementById('ref');

// 将待插入元素插入到参考节点前面
parentElement.insertBefore(insertElement, referenceElement);

以上代码会将id为'insert'的元素插入到id为'ref'元素前面。

替换节点元素

替换元素可以使用两种方法：replaceChild()和parentNode.replaceChild()。

replaceChild()方法接受两个参数：新元素和被替换的元素。

// 获取要替换的旧元素
var oldElement = document.getElementById('old');

// 创建新的节点元素
var newElement = document.createElement('p');
newElement.innerText = '这是新的内容';

// 获取旧元素的父元素
var parentElement = oldElement.parentNode;

// 替换旧元素为新元素
parentElement.replaceChild(newElement, oldElement);

以上代码会将新元素替换旧元素。

parentNode.replaceChild()方法与replaceChild()方法类似，但是不需要获取父元素。

// 获取要替换的旧元素
var oldElement = document.getElementById('old');

// 创建新的节点元素
var newElement = document.createElement('p');
newElement.innerText = '这是新的内容';

// 直接替换旧元素为新元素
oldElement.parentNode.replaceChild(newElement, oldElement);

以上代码会将新元素替换旧元素。

删除节点元素

删除元素可以使用removeChild()和parentNode.removeChild()两种方法。

removeChild()方法接受一个参数：被删除的元素。

// 获取要删除的元素
var deleteElement = document.getElementById('delete');

// 获取父元素
var parentElement = deleteElement.parentNode;

// 删除元素
parentElement.removeChild(deleteElement);

以上代码会将id为'delete'的元素从其父元素中删除。

parentNode.removeChild()方法与removeChild()方法类似，只有一个参数：

// 获取要删除的元素
var deleteElement = document.getElementById('delete');

// 直接删除元素
deleteElement.parentNode.removeChild(deleteElement);

以上代码会将id为'delete'的元素从其父元素中删除。