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

在这篇文章中，我们将学习如何使用JavaScript从一个字符串创建一个元素。这可以在用户需要动态生成元素的情况下使用。这可以通过下面的两种方法实现。

方法1：使用createElement()方法

createElement()方法用于在DOM中创建元素。它接受两个参数，一个是tagName，这是一个字符串，定义了要创建的元素的类型，还有一个可选的options对象，可以用来修改元素的创建方式。任何需要的元素都可以在这个函数中作为一个字符串传递，这将返回指定的元素。这种方法只能用于从一个字符串创建一个单一的元素。

例子：在这个例子中，我们通过指定字符串为 “h2 “来创建一个标题元素。

<html>
<body>
  <h1 style="color:green">
    GeeksforGeeks
  </h1>
  
  <script>
    // Specify the string from which 
    // the elements would be created
    var str = "h2";
    var str2 = "p";
  
    // Creating the elements 
    var elem =
        document.createElement(str);
    var elem2 =
        document.createElement(str2);
  
    // Insert text in the element
    elem.innerText =
      "This is the new heading element";
    elem2.innerText =
      "This is the new paragraph element";
  
    // Add the element to the body 
    document.body.appendChild(elem);
    document.body.appendChild(elem2);
  </script>
</body>
</html>

输出:

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

方法2：使用jQuery parseHTML()方法

jQuery的parseHTML()方法是用来解析一个HTML字符串，这样就可以根据给定的HTML创建元素。这种方法可以用来从字符串中创建多个元素。

例子：在这个例子中，字符串被指定为多个元素，这些元素被解析为HTML并被添加到文档的主体中。

<html>
<head>
  
  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.js">
  </script>
</head>
<body>
  <h1 style="color:green">
    GeeksforGeeks
  </h1>
  <script>
  
    // Define the HTML string to be parsed
    str = "<p>This <i>element</i> is created by" +
      " the <b>parseHTML()</b> " +
      "method in <i>jQuery</i></p>";
  
    // Parsing the string into HTML
    html =  $.parseHTML(str); // Append the element in the document$ ('body').append(html);
  </script>
</body>
</html>

输出:

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