如何在 JavaScript 中动态创建新元素？

在本文中，我们将学习如何借助 createElement 浏览器 API 在 JavaScript 中动态创建新元素。

JavaScript 中的动态元素创建允许您在开始时生成新的 HTML 元素。无论您需要根据用户交互向网页添加内容，还是为特定任务动态生成元素，它都可以帮助增强 Web 应用程序的灵活性和交互性。

让我们通过一些示例来了解如何实现这一点。

示例 1

在本例中，我们将有一个按钮元素，点击它后，我们将生成一个新的“p”元素并将其附加到 DOM 中。

文件名：index.html

<html lang="en">
   <head>
      <title>How to dynamically create new elements in JavaScript?</title>
   </head>
   <body>
      <h3>How to dynamically create new elements in JavaScript?</h3>
      <div id="container">
      <!-- Newly created elements will be appended here -->
   </div>
   <button onclick="createNewElement()">Create Element</button>

   <script>
      function createNewElement() {
      // Create a new paragraph element
      var newParagraph = document.createElement('p');

      // Set the text content of the paragraph
      newParagraph.textContent = 'This is a dynamically created paragraph.';

      // Append the paragraph to the container div
      var container = document.getElementById('container');
      container.appendChild(newParagraph);
      }
   </script>
   </body>
</html>

示例 2

在本例中，我们将遵循上述代码结构，并使用 insertAdjacentHTML、cloneNode、appendChild 和 document.write 四种不同的方法动态创建新元素。在这里，使用了不同的方法和概念来在 JavaScript 中动态创建新元素。

文件名：index.html

<html lang="en">
<head>
   <title>How to dynamically create new elements in JavaScript?</title>
</head>
<body>
   <h3>How to dynamically create new elements in JavaScript?</h3>
   <div id="container">
      <!-- Newly created elements will be appended here -->
   </div>
   <div id="original">Original content</div>

   <button onclick="createNewElement()">Create Element using insertAdjacentHTML</button>
   <button onclick="createNewElementCloneNode()">Create Element using cloneNode</button>
   <button onclick="createNewElementAppend()">Create Element using appendChild</button>
   <button onclick="createNewElementWrite()">Create Element using document.write</button>

   <script>
      function createNewElement() {
         // Example 1: Using insertAdjacentHTML method to add dynamic content
         var container = document.getElementById('container');
         container.insertAdjacentHTML('beforeend', '<p>This is a dynamically created paragraph using insertAdjacentHTML.</p>');
      }

      function createNewElementCloneNode() {
         // Example 2: Using cloneNode method to add dynamic content
         var originalElement = document.getElementById('original');
         var clonedElement = originalElement.cloneNode(true);
         container.appendChild(clonedElement);
      }

      function createNewElementAppend() {
         // Example 3: Using appendChild() method to add dynamic content
         var newDiv = document.createElement('div');
         newDiv.textContent = 'This is a dynamically created div using appendChild.';
         container.appendChild(newDiv);
      }

      function createNewElementWrite() {
         // Example 4: Using document.write Method to add dynamic content
         document.write('<p>This is a dynamically created paragraph using document.write.</p>');
      }
   </script>
</body>
</html>

结论

总之，在 JavaScript 中动态创建元素为创建交互式和动态 Web 应用程序提供了广泛的可能性。通过利用 JavaScript 的 createElement()、appendChild()、document.write、cloneNode 和 insertAdjacentHTML 方法，我们学习了如何在网页上动态创建新元素。

更新于： 2023年8月3日

2K+ 阅读量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告