Angular 4中能否像Jquery那样动态创建并追加DOM元素？

嘿，这个需求太常见啦！不管你是习惯了jQuery的便捷写法，还是想改用原生JS实现，我都给你捋清楚怎么操作。假设咱们从数据库拿到了一组数据（比如用户列表），要把对应的div和输入框动态追加到指定的DOM容器里。

jQuery 实现方式 #

如果你还在使用jQuery，那写法非常直观，用append()方法就能轻松搞定：

// 假设从数据库获取的数据
const dbData = [
  { id: 1, name: "张三", email: "zhangsan@example.com" },
  { id: 2, name: "李四", email: "lisi@example.com" }
];

// 指定要追加到的目标容器
const targetContainer = $("#target-container");

// 循环数据，创建元素并追加
dbData.forEach(item => {
  // 构建包含div和输入框的HTML结构
  const elementHtml = `
    <div class="user-item">
      <label>姓名：</label>
      <input type="text" value="${item.name}" readonly />
      <label>邮箱：</label>
      <input type="email" value="${item.email}" readonly />
    </div>
  `;
  // 追加到目标容器
  targetContainer.append(elementHtml);
});

原生JavaScript 实现方式 #

如果项目已经不再依赖jQuery，原生JS也能实现同样的效果，两种方式供你选择：

方式1：使用 insertAdjacentHTML（类似jQuery的HTML字符串拼接） #

这种方式和jQuery的写法最接近，直接拼接HTML字符串插入到目标元素末尾：

// 数据库数据
const dbData = [
  { id: 1, name: "张三", email: "zhangsan@example.com" },
  { id: 2, name: "李四", email: "lisi@example.com" }
];

// 获取目标容器
const targetContainer = document.getElementById("target-container");

dbData.forEach(item => {
  const elementHtml = `
    <div class="user-item">
      <label>姓名：</label>
      <input type="text" value="${item.name}" readonly />
      <label>邮箱：</label>
      <input type="email" value="${item.email}" readonly />
    </div>
  `;
  // 追加到容器末尾
  targetContainer.insertAdjacentHTML("beforeend", elementHtml);
});

方式2：创建DOM节点（更安全，避免XSS风险） #

如果数据来源不可信，建议用这种方式手动创建DOM节点，能有效避免HTML注入的问题：

const dbData = [
  { id: 1, name: "张三", email: "zhangsan@example.com" },
  { id: 2, name: "李四", email: "lisi@example.com" }
];

const targetContainer = document.getElementById("target-container");

dbData.forEach(item => {
  // 创建外层div
  const userDiv = document.createElement("div");
  userDiv.className = "user-item";

  // 创建姓名标签和输入框
  const nameLabel = document.createElement("label");
  nameLabel.textContent = "姓名：";
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.value = item.name;
  nameInput.readOnly = true;

  // 创建邮箱标签和输入框
  const emailLabel = document.createElement("label");
  emailLabel.textContent = "邮箱：";
  const emailInput = document.createElement("input");
  emailInput.type = "email";
  emailInput.value = item.email;
  emailInput.readOnly = true;

  // 把元素添加到外层div
  userDiv.appendChild(nameLabel);
  userDiv.appendChild(nameInput);
  userDiv.appendChild(emailLabel);
  userDiv.appendChild(emailInput);

  // 把外层div追加到目标容器
  targetContainer.appendChild(userDiv);
});

不管用哪种方式，核心都是先处理数据库返回的数据，然后动态生成对应的DOM结构，再追加到指定的容器里。如果需要更复杂的交互，还可以给生成的元素绑定事件哦！

内容的提问来源于stack exchange，提问作者chan