JS中动态创建元素的三种方法总结(推荐)

下面是关于“JS中动态创建元素的三种方法总结(推荐)”攻略的详细讲解：

简介

在开发中，动态创建元素是不可避免的需求。常见的情况比如使用JS来创建弹窗、显示动态数据、动态添加表单、动态添加图片等等。下面将介绍JS中动态创建元素的三种方法，这些方法都是比较常用和实用的。

方法一：使用document.createElement创建元素

使用document.createElement创建元素的步骤如下：

1. 使用document.createElement方法创建元素
2. 使用element.innerText或者element.innerHTML修改元素内容
3. 使用element.setAttribute修改元素属性
4. 使用appendChild方法将新的元素添加到document中

下面是一段示例代码：

// 创建新的<div>元素
var divEl = document.createElement("div");

// 修改元素内容
divEl.innerText = "这是新创建的元素";

// 修改元素属性
divEl.setAttribute("class", "my-class");

// 将元素添加到document中
document.body.appendChild(divEl);

方法二：使用字符串拼接创建元素

利用字符串拼接的方式来创建元素非常简单。你只需要将元素的HTML代码拼接好，然后使用innerHTML将其添加到文档中即可。虽然这种方法比使用createElement方法效率要低，但是对于元素内容比较复杂的情况下，使用字符串拼接能够相对容易地保持结构的一致性。

下面是一段示例代码：

// 创建新的<div>元素
var divHTML = "<div class='my-class'>这是新创建的元素</div>";

// 将元素添加到document中
document.body.innerHTML += divHTML;

方法三：使用模板字符串创建元素

使用ES6新增的模板字符串（Template Strings）也可以很容易地创建元素。模板字符串中使用${}来插入JS表达式。同时，模板字符串也支持多行字符串，这样会使得代码更加清晰易懂。

下面是一段示例代码：

// 创建新的<div>元素
var divTemplate = `
  <div class='my-class'>
    这是新创建的元素
  </div>
`;

// 将元素添加到document中
document.body.innerHTML += divTemplate;

总结

以上就是JS中动态创建元素的三种方法。这些方法都比较实用，可以根据不同的使用场景选择不同的方法来动态创建元素。在实际开发中，我们常常需要动态地创建元素，并将其添加到DOM中。学会了这些方法，将会提高我们开发效率和代码的可读性。