使用 JavaScript 添加多行 HTML 的正确方法是啥？

Posted 2023-05-07

【中文标题】使用 JavaScript 添加多行 HTML 的正确方法是啥？

【英文标题】：What is proper method of appending multiple lines of HTML using JavaScript?使用 JavaScript 添加多行 HTML 的正确方法是什么？

【发布时间】：2019-03-16 21:41:42

【问题描述】：

我知道appendChild和createElement的，但这些方法来使用的时候我加入html的单行。我承认，我可以添加脚本对象，或iframe对象使用这种方法，但如何将我在javascript中添加20+行HTML到现有的HTML文件？ P>

我建了一个search.js文件到HTML页面的地址搜索要求。它的伟大工程！但我想概括了我的搜索表单和CSS和想我可以将数据追加到现有的HTML文档让事情变得紧凑，更易于管理。

更新：所以的JavaScript将在底部的两个SCRIPT标签内添加到现有的HTML页面。的JS将追加一个字符串 - 这将是20条+线的HTML字符串化 - 到现有的页面，这是我曾希望呈现为HTML P>

var sectionAsHtml = '' +
'<div class='xyz'>' +
' <div class='abc'>' +
'  <p>This is just an example for demonstration purposes.</p>' +
' </div>' +
'</div>';

我将然后使用“.getElementById”查找定位我的HTML的主体，然后在“.appendChild”上面的字符串。 P>

【问题讨论】：

你能告诉我们你尝试过什么？ SPAN> 需要的种类知道，如果你只是将原始的HTML，或者如果你在浏览器的情况下这样做是目前显示的是HTML，或者如果你的服务器执行模板，或者是什么。跨度> 客户端JS添加到现有页面。跨度>

【参考方案1】：

您可以使用如下函数createElement()：

let html = `<ul>
  <li>Li 1</li>
  <li>Li 2</li>
</ul>
<div id="test">Testdiv</div>`

function createElement( str ) 
    var frag = document.createDocumentFragment();

    var elem = document.createElement('div');
    elem.innerHTML = str;

    while (elem.childNodes[0]) 
        frag.appendChild(elem.childNodes[0]);
    
    return frag;


let fragment = createElement(html)
document.getElementById('app').appendChild(fragment)

<div id="app">
  <h1>The App</h1>
</div>

取自这个类似问题的答案：https://***.com/a/3662980/3744304