JavaScript 创建、修改和删除节点

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年7月6日 14:14 本文热度 67

一、创建节点

创建节点分为创建元素节点和文本节点.

1) createElement

创建新元素,我们来看看示例:

//创建一个新的 div 元素const newDiv = document.createElement('div');
//给它加点内容newDiv.textContent = '我是新来的div';
//加点样式newDiv.style.backgroundColor = 'lightblue';newDiv.style.padding = '10px';

createElement 方法接收一个参数, 就是你要创建的 HTML 标签名. 创建后, 这个元素还不会立即出现在页面上, 它只是存在于内存中, 等着被添加到 DOM 树中.

2) createTextNode

创建文本节点:

const textNode = document.createTextNode('这是一段纯文本内容');
//可以把这个文本节点添加到元素中newDiv.appendChild(textNode);

虽然现在大多数情况下我们直接用textContent或innerText就够了, 但在某些特殊场景下 createTextNode 还是很有用的.

二、添加节点

创建好节点后, 我们需要把它们放到页面中才能看到效果:

1) appendChild

添加到末尾, 这是最常用的方法 , 把节点添加到指定父节点的子节点列表末尾:

// 获取页面中的容器const container = document.getElementById('container');
// 把我们之前创建的 div 添加进去container.appendChild(newDiv);

如果你把一个已存在于文档中的节点 append 到另一个位置, 它会被从原来的位置移动, 而不会被复制.

2) insertBefore

在指定位置插入, 如果你想控制新节点的位置 , 而不是总是添加到末尾, 可以使用 insertBefore:

//创建一个新元素const newParagraph = document.createElement('p');newParagraph.textContent = '我在中间';
//获取参考节点const firstChild = container.firstChild;
//在第一个子节点前插入新段落container.insertBefore(newParagraph, firstChild);

insertBefore 接收两个参数: 要插入的节点和参考节点.新节点会被插入到参考节点之前.

3) insertAdjacentHTML

更灵活的插入,这组方法提供了更多插入位置的选择:

const targetElement = document.getElementById('target');
// 四种插入位置targetElement.insertAdjacentHTML('beforebegin', '<div>beforebegin - 在元素前面</div>');targetElement.insertAdjacentHTML('afterbegin', '<div>afterbegin - 在元素内部开头</div>');targetElement.insertAdjacentHTML('beforeend', '<div>beforeend - 在元素内部末尾</div>');targetElement.insertAdjacentHTML('afterend', '<div>afterend - 在元素后面</div>');

这个方法特别适合需要精确控制插入位置的场景.

三、修改节点, 创建和添加节点后, 我们经常需要修改它们

1) 修改属性:

const link = document.createElement('a');
//设置属性link.href = 'https://www.example.com';link.title = '示例网站';link.setAttribute('data-custom', 'value'); //自定义属性
//修改样式link.style.color = 'red';link.style.textDecoration = 'none';

2) 修改内容:

//替换整个内容(包括HTML)link.innerHTML = '<strong>点击我</strong>';
//只设置文本内容(更安全,防止XSS攻击)link.textContent = '安全的文本内容';
//追加内容link.innerHTML += ' (追加的内容)';

3) replaceChild - 替换节点

//创建一个新节点const newHeading = document.createElement('h2');newHeading.textContent = '新的标题';
//获取要被替换的节点和父节点const oldHeading = document.getElementById('old-heading');const parent = oldHeading.parentNode;
//替换节点parent.replaceChild(newHeading, oldHeading);

四，节点的其他操作

1）cloneNode - 节点克隆:

const original = document.getElementById('original');
// 浅克隆（只克隆节点本身，不包含子节点）const shallowClone = original.cloneNode(false);
// 深克隆（克隆节点及其所有子节点）const deepClone = original.cloneNode(true);
// 添加克隆的节点到文档中document.body.appendChild(deepClone);

cloneNode 默认不会复制事件监听器,但会复制属性(包括像 onclick 这样的内联事件处理器).

2）removeChild - 移除节点:

const parent = document.getElementById('parent');const child = document.getElementById('child-to-remove');
//移除子节点parent.removeChild(child);

remove-更简单的方法:

const elementToRemove = document.getElementById('remove-me');elementToRemove.remove(); //直接从DOM中移除自己

3) DocumentFragment, 批量操作优化:

当你需要添加多个节点时,频繁操作 DOM 会导致性能问题.这时可以使用 DocumentFragment:

//创建一个文档片段const fragment = document.createDocumentFragment();
//向片段中添加多个元素for (let i = 0; i < 100; i++) {  const newItem = document.createElement('li');  newItem.textContent = `项目 ${i}`;  fragment.appendChild(newItem);}
//一次性添加到DOM中document.getElementById('list').appendChild(fragment);

五、我们来看一个完整的例子, 结合上面讲的各种方法

//创建一个评论列表功能function addComment(name, text) {  //创建文档片段  const fragment = document.createDocumentFragment();
  //创建评论容器  const commentDiv = document.createElement('div');  commentDiv.className = 'comment';
  //创建用户名标题  const nameHeading = document.createElement('h3');  nameHeading.textContent = name;
  //创建评论文本  const textParagraph = document.createElement('p');  textParagraph.textContent = text;
  // 创建删除按钮  const deleteButton = document.createElement('button');  deleteButton.textContent = '删除';  deleteButton.className = 'delete-btn';
  //组装评论  commentDiv.appendChild(nameHeading);  commentDiv.appendChild(textParagraph);  commentDiv.appendChild(deleteButton);
  //添加到片段  fragment.appendChild(commentDiv);
  //获取评论列表容器  const commentsContainer = document.getElementById('comments');
  //如果有评论,就插入到第一个位置,否则直接添加  if (commentsContainer.firstChild) {    commentsContainer.insertBefore(fragment, commentsContainer.firstChild);  } else {    commentsContainer.appendChild(fragment);  }}
//添加删除功能document.getElementById('comments').addEventListener('click', function(e) {  if (e.target.classList.contains('delete-btn')) {    const comment = e.target.closest('.comment');    comment.remove(); // 现代方法    // 或者用旧方法：    // comment.parentNode.removeChild(comment);  }});
// 使用示例addComment('张三', '这篇文章太棒了！');addComment('李四', '学到了很多新知识！');

阅读原文：原文链接

该文章在 2025/7/7 9:35:50 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。