页面插入元素

页面插入元素是指通过 JavaScript 在页面中动态创建元素并将其插入到指定位置的操作。这在 Web 开发中非常常见，可以用来实现动态内容的加载、用户交互的响应等功能。下面是一些常见的页面插入元素的方法：

1. createElement() 和 appendChild()：

• 使用 document.createElement() 方法创建新的元素节点。
• 使用 appendChild() 方法将新创建的元素节点插入到指定元素的子元素列表的末尾。

// 创建一个新的 <div> 元素
var newDiv = document.createElement('div');
 
// 将新的 <div> 元素插入到 id 为 "container" 的元素中
document.getElementById('container').appendChild(newDiv);

innerHTML：

• 使用 innerHTML 属性可以将 HTML 字符串插入到指定元素内部。

// 将 HTML 字符串插入到 id 为 "container" 的元素内部
document.getElementById('container').innerHTML = '<div>Hello, World!</div>';

insertAdjacentHTML()：

• 使用 insertAdjacentHTML() 方法可以在指定位置插入 HTML 字符串。

// 在 id 为 "container" 的元素之后插入 HTML 字符串
document.getElementById('container').insertAdjacentHTML('afterend', '<div>Hello, World!</div>');

insertAdjacentElement()：

• 使用 insertAdjacentElement() 方法可以在指定位置插入一个元素节点。

// 在 id 为 "container" 的元素之后插入一个新的 <div> 元素
document.getElementById('container').insertAdjacentElement('afterend', newDiv);

这些方法可以根据需要选择合适的方式来在页面中插入元素，具体选择哪种方法取决于具体的场景和需求。