JS 向文档添加多个元素 - Javascript

在web开发中，我们经常需要向HTML文档中添加元素，比如动态生成一个列表或表格。使用Javascript可以很方便地完成这个任务。

使用 document.createElement() 方法创建元素

我们可以使用document.createElement()方法创建一个新的HTML元素，并指定元素类型和属性。比如下面的代码创建了一个<li>元素，并设置了它的id和class属性：

var newLi = document.createElement('li');
newLi.id = 'my-li';
newLi.className = 'list-item';

使用 document.createTextNode() 方法创建文本节点

同样的，我们可以使用document.createTextNode()方法创建一个新的文本节点，并将文本内容插入到元素中：

var newText = document.createTextNode('This is a new list item.');
newLi.appendChild(newText);

使用 appendChild() 方法将元素插入到文档中

最后，我们可以使用appendChild()方法将新创建的元素插入到文档中的指定位置。比如，我们可以通过以下代码将新创建的<li>元素插入到<ul>列表中：

var myList = document.getElementById('my-list');
myList.appendChild(newLi);

完整的代码如下：

var newLi = document.createElement('li');
newLi.id = 'my-li';
newLi.className = 'list-item';

var newText = document.createTextNode('This is a new list item.');
newLi.appendChild(newText);

var myList = document.getElementById('my-list');
myList.appendChild(newLi);

遍历创建和添加元素

如果我们需要一次创建和添加多个元素，也可以使用循环遍历的方式。比如，下面的代码创建了一个包含5个<li>元素的列表，并将它们添加到文档中：

var myList = document.getElementById('my-list');

for (var i = 1; i <= 5; i++) {
  var newLi = document.createElement('li');
  newLi.id = 'li-' + i;
  newLi.appendChild(document.createTextNode('List item ' + i));
  myList.appendChild(newLi);
}

结论

通过使用document.createElement()，document.createTextNode()和appendChild()方法，我们可以方便地向HTML文档中添加多个元素。这种方式可以动态生成页面内容，使我们的web应用程序更具交互性和动感。