一个又一个的 Javascript 插入元素

在 Web 开发中，经常需要使用 Javascript 动态地向页面中添加、删除或修改元素。在本文中，我们将介绍一些常用的 Javascript 方法来实现这一任务。

使用 document.createElement() 方法添加元素

使用 document.createElement() 方法可以在 DOM 中创建新的元素。该方法接收一个参数，即要创建的元素的标签名。例如，要在文档中添加一个

const newDiv = document.createElement('div');
// 在 DOM 中添加新元素
document.body.appendChild(newDiv);

使用 innerHTML 属性插入 HTML 内容

使用 innerHTML 属性可以将 HTML 字符串插入到元素中。例如，要将一个

元素插入到

const newDiv = document.createElement('div');
// 用 innerHTML 属性插入 HTML 字符串
newDiv.innerHTML = '<p>Hello world!</p>';
// 在 DOM 中添加新元素
document.body.appendChild(newDiv);

使用 insertAdjacentHTML() 方法插入 HTML 内容

使用 insertAdjacentHTML() 方法可以在指定的位置插入 HTML 内容。该方法接收两个参数，第一个参数指定要插入内容的位置，第二个参数指定要插入的 HTML 内容。以下代码将在

const myDiv = document.querySelector('#myDiv');
// 在元素内部底部插入 HTML 内容
myDiv.insertAdjacentHTML('beforeend', '<p>Hello world!</p>');

const myDiv = document.querySelector('#myDiv');
const newParagraph = document.createElement('p');
// 在指定的元素中添加一个子节点
myDiv.appendChild(newParagraph);

const myList = document.querySelector('#myList');
const newListItem = document.createElement('li');
// 在指定位置之前插入新的节点
myList.insertBefore(newListItem, myList.firstChild);