Javascript - 使用appendChild方法追加多个元素

当我们需要向页面中动态添加多个元素时，使用appendChild方法可以帮助我们高效地完成这个任务。

使用方法

const parentElem = document.querySelector('parent-selector');
const newElem1 = document.createElement('tag-name1');
const newElem2 = document.createElement('tag-name2');
const newElem3 = document.createElement('tag-name3');

parentElem.appendChild(newElem1);
parentElem.appendChild(newElem2);
parentElem.appendChild(newElem3);

以上代码的解释：

• 通过querySelector方法选取父元素。
• 使用createElement方法创建新元素，可以根据自己需要传入不同的标签名称。
• 通过appendChild方法将新元素追加到父元素中。

追加多个元素的方法

在以上的方法中，我们通过多次调用appendChild方法即可实现追加多个元素。但是如果需要添加的元素较多，这种写法会显得冗长、重复，并且难以维护。因此我们可以使用一个循环语句来简化代码。

const parentElem = document.querySelector('parent-selector');

const newElems = ['tag-name1', 'tag-name2', 'tag-name3'];

newElems.forEach(tag => {
  const newElem = document.createElement(tag);
  parentElem.appendChild(newElem);
});

以上代码的解释：

• 通过querySelector方法选取父元素。
• 首先定义一个数组，数组中包含了需要添加的新元素标签名。
• 使用forEach方法遍历数组中的标签名，对于每一个标签名创建新元素，再通过appendChild方法将新元素追加到父元素中。

结论

在JS开发中，动态添加元素是一件非常常见的事情。使用appendChild方法可以让我们轻松地实现向页面中追加元素的需求。而上述的循环方法则可以让我们便捷地添加多个元素，从而提高了开发效率。