appendchild是javascript中用于向父节点末尾添加新子节点的方法，它返回被添加的节点。其基本用法是通过获取父元素、创建新元素、调用appendchild将新元素添加到父元素中；当参数为已存在节点时，会将其从原位置移动到新位置。与insertbefore不同，appendchild始终将节点添加到末尾，而insertbefore可指定插入位置。为优化性能，可使用documentfragment减少dom操作次数，或在合适场景下使用innerhtml。此外，appendchild也可用于操作shadow dom，且兼容性良好，适用于主流浏览器。
appendChild方法是JavaScript中用于向指定父节点的子节点列表末尾添加新节点的方法。简单来说，就是把一个HTML元素“塞”到另一个元素的“肚子”里，让它变成“儿子”。
appendChild主要用于动态地修改DOM结构，比如在网页上动态添加新的内容，或者移动已有的元素。
appendChild的用法很简单，但理解它的工作方式和一些注意事项至关重要，能避免很多莫名其妙的bug。
立即学习“Java免费学习笔记（深入）”；
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会影响性能，因为每次操作都会触发浏览器的重绘和重排。特别是在循环中添加大量节点时，性能问题会更加明显。
为了优化性能，可以考虑以下几种方法：
- 使用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操作，大大提高了性能。
- 使用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会替换父元素中原有的所有子节点。
- 避免在循环中访问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进行优化。
