MST

星途 面试题库

面试题：JavaScript 中动态添加 DOM 元素的常见方法

请描述在 JavaScript 中至少两种动态添加 DOM 元素的方法，并给出简单示例代码。
31.5万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试

1. 使用 document.createElement 和 appendChild

通过 document.createElement 创建新的 DOM 元素，再用 appendChild 将其添加到已有的 DOM 元素中。

<!DOCTYPE html>
<html>

<body>

  <div id="parent"></div>

  <script>
    // 创建一个新的 <p> 元素
    const newParagraph = document.createElement('p');
    newParagraph.textContent = '这是新添加的段落';

    // 获取 id 为 "parent" 的 div 元素
    const parentDiv = document.getElementById('parent');

    // 将新段落添加到 div 中
    parentDiv.appendChild(newParagraph);
  </script>

</body>

</html>

2. 使用 innerHTML

通过设置已有元素的 innerHTML 属性来动态添加新的 DOM 元素。

<!DOCTYPE html>
<html>

<body>

  <div id="parent"></div>

  <script>
    const parentDiv = document.getElementById('parent');
    // 通过 innerHTML 添加新的 <span> 元素
    parentDiv.innerHTML += '<span>这是通过 innerHTML 添加的 span 元素</span>';
  </script>

</body>

</html>

3. 使用 insertAdjacentHTML

insertAdjacentHTML 方法将指定的文本解析为 HTML 或 XML，并将结果节点插入到 DOM 树中的指定位置。

<!DOCTYPE html>
<html>

<body>

  <div id="parent"></div>

  <script>
    const parentDiv = document.getElementById('parent');
    // 在 parentDiv 内部开头插入新的 <a> 元素
    parentDiv.insertAdjacentHTML('afterbegin', '<a href="#">这是通过 insertAdjacentHTML 添加的链接</a>');
  </script>

</body>

</html>