如何在 JavaScript 中从字符串创建元素？

在本教程中，我们将了解在 JavaScript 中从字符串创建元素的各种方法。从字符串创建元素在我们需要动态生成元素以使网站具有交互性的情况下非常有用。例如，在一个待办事项列表应用程序中，我们可以添加、删除和编辑待办事项。

createElement() 方法

我们使用`createElement()`方法创建 JavaScript 元素。要创建特定元素，我们将元素名称作为字符串传递到`createElement()`方法中。

createElement(tagName)函数的参数是将使用此方法创建的标签的名称。这里tagName是参数名称，它将以字符串形式出现。请注意，一个字符串只能创建一个元素。

语法

document.createElement("tagName")

在tagName处，我们传递标签名称，例如p（段落）、h1（标题 1）、img（图像）。createElement会将tagName转换为小写，因此您无需担心大小写。

步骤

  • 步骤 1 - 创建包含元素值的字符串，例如 h3 和 p 等

  • 步骤 2 - 将字符串作为参数传递给createElement()方法。将值赋给一个变量。这将创建我们所需的元素。

  • 步骤 3 - 创建元素后，我们使用innerText属性将所需文本赋给这两个元素。

  • 步骤 4 - 最后，我们使用append()或appendChild()方法将创建的元素附加到网页，以便用户可以看到。

让我们从字符串创建一个标题和一个段落。

let string1="h3"
let string2="p"
let element1=document.createElement(string1)
let element2=document.createElement(string2)

因此，您了解了我们如何创建元素，但是创建元素并不能帮助用户看到元素，因为它不是 DOM 的一部分，而是必须通过将它们附加到网页来使其成为 DOM 的一部分。

因此，我们使用一些方法，例如append()和appendChild()。

示例

使用 append() 方法附加创建的元素。

在下面的示例中，我们使用 document createElement() 方法创建了两个元素 h3 和 p。然后将一些文本赋给这些元素，并使用 append() 方法将元素附加到 DOM。最后，使用innerHTML属性显示这些元素。

<html>
<head>
   <title>Creating elements from string in JavaScriptnhi</title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.append(element1)
      document.body.append(element2)
   </script>
</body>
</html>

示例

使用 appendChild() 方法附加创建的元素。

在下面的示例中，我们使用 document createElement() 方法创建了两个元素 h3 和 p。然后将一些文本赋给这些元素，并使用 appendChild() 方法将元素附加到 DOM。最后，使用 innerHTML 属性显示这些元素。

<html>
<head>
   <title>Creating elements from string in JavaScript </title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.appendChild(element1)
      document.body.appendChild(element2)
   </script>
</body>
</html>

现在您可能在想，上面程序的输出是相同的，那么是什么让这两个程序不同呢？

嗯，是的，两者都用于将节点附加到 HTML 文档，但是对于 append() 方法，它返回附加的节点，而 appendChildI() 方法不返回任何内容。

使用 append() 方法，我们可以一次附加多个元素，但是对于 appendChild() 方法，我们一次只能附加一个元素。

例如

document.body.append(element1, element2)

这将与以下操作相同

document.body.append(element1)
document.body.append(element2)

使用 append() 方法，可以将 DOMString 和 DOMNodes 都附加到父元素，但是对于 appendChild() 方法，只能将 DOMNodes 附加到父元素。

因此，这些是一些我们可以使用从字符串创建元素的方法。

更新于：2022年8月23日

2K+ 次浏览

启动您的职业生涯

完成课程后获得认证

开始
广告