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

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

方法 1：使用 createElement() 方法

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

示例：在此示例中，我们通过将字符串指定为“h2”来创建标题元素。

HTML

  
    GeeksforGeeks
  
  
  
    // 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);
  

输出：

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

jQuery 的parseHTML() 方法用于解析 HTML字符串，以便根据给定的 HTML 创建元素。这种方法可用于从字符串创建多个元素。

示例：在此示例中，字符串由多个元素指定，这些元素被解析为 HTML 并添加到文档正文中。

HTML

  
  
  
  


  
    GeeksforGeeks
  
  
  
    // 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);
  

输出：