JavaScriptappendChild方法详解

`JavaScript`的`appendChild`方法是前端开发中动态修改页面内容的关键技术。它用于将一个节点添加到指定父元素的子节点列表末尾，实现网页内容的动态更新和元素移动。本文深入解析了`appendChild`的基本用法，包括如何获取父元素、创建新元素以及使用`appendChild`将新元素添加到父元素中。同时，探讨了`appendChild`与`insertBefore`的区别，以及移动现有节点的行为。为了优化性能，文章还介绍了使用`DocumentFragment`和`innerHTML`的技巧。此外，还涉及了`appendChild`在`Shadow DOM`中的应用，以及其良好的浏览器兼容性。掌握`appendChild`，能有效提升前端开发效率和代码质量。

appendChild是JavaScript中用于向父节点末尾添加新子节点的方法，它返回被添加的节点。其基本用法是通过获取父元素、创建新元素、调用appendChild将新元素添加到父元素中；当参数为已存在节点时，会将其从原位置移动到新位置。与insertBefore不同，appendChild始终将节点添加到末尾，而insertBefore可指定插入位置。为优化性能，可使用DocumentFragment减少DOM操作次数，或在合适场景下使用innerHTML。此外，appendChild也可用于操作Shadow DOM，且兼容性良好，适用于主流浏览器。

appendChild方法是JavaScript中用于向指定父节点的子节点列表末尾添加新节点的方法。简单来说，就是把一个HTML元素“塞”到另一个元素的“肚子”里，让它变成“儿子”。

appendChild主要用于动态地修改DOM结构，比如在网页上动态添加新的内容，或者移动已有的元素。

appendChild的用法很简单，但理解它的工作方式和一些注意事项至关重要，能避免很多莫名其妙的bug。

appendChild的基本用法 appendChild方法接受一个参数：要添加的节点。这个节点可以是新创建的元素，也可以是文档中已存在的元素。

// 获取父元素
const parentElement = document.getElementById('parent');

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '我是新添加的元素';

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

这段代码首先获取了id为"parent"的元素，然后创建了一个新的div元素，并设置了它的文本内容，最后使用appendChild方法将这个新元素添加到了父元素中。

appendChild的返回值是什么？

appendChild方法返回的是被添加的节点。 很多人可能会忽略这一点，但这个返回值在某些场景下非常有用。例如，你可能需要在添加节点后立即对其进行一些操作，这时就可以直接使用appendChild的返回值。

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '我是新添加的元素';

// 添加节点并获取返回值，然后设置其属性
const addedElement = parentElement.appendChild(newElement);
addedElement.setAttribute('class', 'new-element');

appendChild和insertBefore有什么区别？

appendChild是将节点添加到父元素的子节点列表的末尾，而insertBefore可以将节点添加到父元素的子节点列表的指定位置。

insertBefore方法接受两个参数：要添加的节点和要插入的节点之前的节点（参考节点）。

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = '我是新添加的元素';

// 获取参考节点（例如，第一个子节点）
const referenceNode = parentElement.firstChild;

// 将新元素插入到参考节点之前
parentElement.insertBefore(newElement, referenceNode);

如果referenceNode为null，则insertBefore的行为与appendChild相同，会将newElement添加到parentElement的末尾。

appendChild移动节点的行为

如果appendChild的参数是一个文档中已经存在的节点，那么appendChild会将该节点从原来的位置移动到新的位置。 这点非常重要，需要牢记！

  
我是要移动的元素

这段代码会将id为"element"的元素从id为"parent1"的元素中移动到id为"parent2"的元素中。移动后，"element"元素将不再是"parent1"的子节点，而是"parent2"的子节点。

appendChild的性能考量

频繁地使用appendChild操作DOM会影响性能，因为每次操作都会触发浏览器的重绘和重排。特别是在循环中添加大量节点时，性能问题会更加明显。

为了优化性能，可以考虑以下几种方法：

1. 使用DocumentFragment： DocumentFragment是一个轻量级的文档片段，可以用来批量添加节点，减少DOM操作的次数。

const parentElement = document.getElementById('parent');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const newElement = document.createElement('div');
  newElement.textContent = `我是第${i + 1}个元素`;
  fragment.appendChild(newElement);
}

// 将DocumentFragment添加到父元素中
parentElement.appendChild(fragment);

这段代码首先创建了一个DocumentFragment，然后在循环中将新的div元素添加到DocumentFragment中，最后将整个DocumentFragment添加到父元素中。这样就只需要一次DOM操作，大大提高了性能。

2. 使用innerHTML： 虽然innerHTML可能会带来一些安全风险（例如XSS攻击），但在某些情况下，使用innerHTML可以比appendChild更高效。

const parentElement = document.getElementById('parent');
let htmlString = '';

for (let i = 0; i < 1000; i++) {
  htmlString += `
我是第${i + 1}个元素
`;
}

// 使用innerHTML一次性添加所有元素
parentElement.innerHTML = htmlString;

需要注意的是，使用innerHTML会替换父元素中原有的所有子节点。

3. 避免在循环中访问DOM属性： 在循环中访问DOM属性（例如offsetWidth、offsetHeight）会导致浏览器强制进行重排，影响性能。应该尽量避免在循环中访问DOM属性，或者将DOM属性的值缓存起来。

appendChild与Shadow DOM

Shadow DOM允许将一个隐藏的、独立的DOM附加到元素上。appendChild也可以用于操作Shadow DOM。

// 获取元素
const element = document.getElementById('element');

// 创建Shadow DOM
const shadowRoot = element.attachShadow({ mode: 'open' });

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '我是Shadow DOM中的元素';

// 将新元素添加到Shadow DOM中
shadowRoot.appendChild(newElement);

这段代码首先获取了id为"element"的元素，然后创建了一个Shadow DOM，并将新的div元素添加到了Shadow DOM中。Shadow DOM中的元素不会受到外部CSS和JavaScript的影响，实现了样式的隔离。

appendChild的兼容性问题

appendChild方法在所有主流浏览器中都得到了很好的支持，包括IE6+、Firefox、Chrome、Safari和Opera。因此，一般情况下不需要担心兼容性问题。 但在处理一些特殊情况时，可能需要进行一些额外的处理。例如，在IE6和IE7中，使用appendChild添加table元素时可能会出现一些问题。

总结

appendChild是JavaScript中一个非常重要的DOM操作方法，用于向指定父节点的子节点列表末尾添加新节点。理解appendChild的工作方式和一些注意事项，可以帮助你编写更高效、更健壮的代码。 记住，appendChild返回的是被添加的节点，如果参数是已存在的节点，appendChild会移动节点，频繁的DOM操作会影响性能，可以使用DocumentFragment或innerHTML进行优化。

终于介绍完啦！小伙伴们，这篇关于《JavaScriptappendChild方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！