JS动态创建元素的两种方法

我来为您详细讲解“JS动态创建元素的两种方法”的完整攻略。

1. 使用createElement方法创建元素

使用document.createElement(tagName)方法可以通过JS动态创建一个新的元素节点。其中，tagName参数表示要创建的元素的标签名。

示例一：创建一个<p>元素并添加到页面中

// 创建一个 <p> 元素节点
const p = document.createElement('p');

// 给 <p> 元素节点添加文本内容
p.innerText = '这是动态创建的一个段落';

// 将 <p> 元素节点添加到body中
document.body.appendChild(p);

示例二：创建一个带有属性的<img>元素并添加到页面中

// 创建一个 <img> 元素节点
const img = document.createElement('img');

// 添加属性
img.src = 'https://example.com/example.png';
img.alt = 'Example Image';

// 将 <img> 元素节点添加到body中
document.body.appendChild(img);

2. 使用innerHTML属性创建元素

我们可以使用innerHTML属性创建新的元素节点。但这种方式不够灵活，容易受到大量HTML内容的污染，造成安全问题。

示例三：使用innerHTML创建一个<p>元素并添加到页面中

// 创建一个 <p> 元素并添加到页面中
document.body.innerHTML += '<p>这是动态创建的一个段落</p>';

示例四：使用innerHTML创建一个带有属性的<img>元素并添加到页面中

// 创建一个带有属性的 <img> 元素并添加到页面中
document.body.innerHTML += '<img src="https://example.com/example.png" alt="Example Image">';

以上就是使用JS动态创建元素的两种方法攻略啦！