如何在 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 的一部分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() 方法附加创建的元素。
在下面的示例中，我们使用文档 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 文档，但在 case append() 方法中，它返回附加的节点，而 appendChildI() 方法不返回任何内容。
使用 append() 方法，我们可以一次附加多个元素，但在 case appendChild() 方法中，我们一次只能附加一个元素。
类似
document.body.append(element1, element2)
这将完成与其相同的工作
document.body.append(element1) document.body.append(element2)
使用 append() 方法DOMString 和 DOMNodes 都可以附加到父元素，但在 appendChild() 方法中，只有 DOMNodes 可以附加到父元素。
因此，这些是我们可以用来从字符串创建元素的一些方法。
