使用JavaScript附加多行HTML的正确方法是什么？

我知道

appendChild

和

createElement

但是这些是我添加一行HTML时要使用的方法。我知道我可以使用这种方法添加一个脚本对象，或者一个

iframe

对象，但是如何在JavaScript中向现有HTML文档添加20多行HTML呢

我构建了一个

search.js

文件来满足HTML页面的搜索需求。它工作得很好！但是我想封装我的搜索表单和CSS，我想我可以将数据附加到现有的HTML文档中，以保持内容紧凑和更易于管理

更新：因此JavaScript将添加到两个脚本标记中底部的现有HTML页面中。JS会在现有页面上附加一个字符串，即20多行的HTML字符串，我原本希望这个字符串能够呈现为HTML

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

var sectionAsHtml=''+
'' +
' ' +
“这只是一个演示示例。
”+
' ' +
'';

---

然后，我将使用“.getElementById”查找HTML的正文，然后使用上面的字符串“.appendChild”。

您可以使用函数

createElement（）

，如下所示：

let html=`

李1
李2

Testdiv`
函数createElement（str）{
var frag=document.createDocumentFragment（）；
var elem=document.createElement（'div'）；
elem.innerHTML=str；
while（elem.childNodes[0]）{
frag.appendChild（elem.childNodes[0]）；
}
返回碎片；
}
let fragment=createElement（html）
document.getElementById（'app'）.appendChild（片段）

应用程序

您能告诉我们您尝试过什么吗？需要知道您是在转换原始HTML，还是在当前显示该HTML的浏览器的上下文中进行转换，或者您是在执行模板制作的服务器，或者是在现有页面中添加了什么.Client-side JS。