如何在<；中运行JavaScript；脚本>；通过innerHTML注入内容时的标记？

我正在尝试为一个图库编写一个基于JavaScript的分页，它通过服务器上的

onClick

-事件加载HTML。HTML仅通过

innerHtml

附加。唯一的困难是我需要用缩略图URL填充数组以进行预览。这方面的数据通过与HTML相同的HTTP请求提供

我试图通过

标记将其添加到HTML中，但通过

innerHtml

插入时不会执行这些操作（请参阅）

约束条件：

• HTML必须在服务器上呈现，无需通过JavaScript手动创建HTML元素（由于模板的可交换性）
• 脚本和HTML必须通过单个HTTP请求提供（由于复杂性）

可能的解决方案

由于我对JavaScript的了解有限，我只看到了两种解决方案，其中似乎没有一种是正确的：

将HTML和数组数据作为JSON发送。因此，可以通过

innerHTML

附加HTML，当HTTP请求返回时，数组数据可以传递给函数

“内部web抓取”：理论上，我可以将数组数据作为JSON字符串保存在

元素中，并通过一些模糊的JS技巧提取其内容。但我肯定我会为此挨打的

非常感谢您的任何建议

对于可能涉及某些代码的用户：

函数加载下一页（uri）{
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，uri）；
xhr.onload=函数（）{
如果（xhr.status==200）{
var loadNextButton=document.getElementById（“加载下一步按钮”）；
loadNextButton.parentNode.removeChild（loadNextButton）；
var vbw=document.getElementById（“vbw”）；
vbw.innerHTML=vbw.innerHTML+xhr.response；
}否则{
conosole.log（'Failed:'+xhr.status）；
}
};
xhr.send（）；
}

让thumbNailStore={
concat:function（）{
log（'Concat已运行'）；
},
};
函数addThumbnailListeners（）{
log（'addThumbnailListeners已运行'）；
}
thumbNailStore.concat（）；//这将生成一个JSON，并将其附加到页面中的数组中
addThumbnailListeners（）；
加载更多

如果jQuery是一个选项，

load（）

将执行加载内容中包含的任何脚本元素，并修改内部HTML，这听起来像是您需要的

否则，可以使用eval。您只需要通过某种预定id检索脚本元素（可能是

vbw

的最后一个脚本元素子元素），或者甚至通过从响应数据中创建元素并从中访问脚本子元素来检索。无论哪种方式，一旦拥有脚本元素对象：

---

eval（scriptElement.innterHtml）

如果jQuery是一个选项，

load（）

将执行加载内容中包含的任何脚本元素，并修改内部HTML，这听起来像是您需要的

否则，可以使用eval。您只需要通过某种预定id检索脚本元素（可能是

vbw

的最后一个脚本元素子元素），或者甚至通过从响应数据中创建元素并从中访问脚本子元素来检索。无论哪种方式，一旦拥有脚本元素对象：

---

eval（scriptElement.innterHtml）
您的解决方案几乎正确，我将替换
vbw.innerHTML=vbw.innerHTML+xhr.response.appendChild（）
方法编写>。但我也注意到您正在添加倍数
…
。因此，我认为如果你按下按钮加载更多两次，你的代码中就会有3个
标记

如何解决这个问题？
首先，提取内联脚本
inlineScript
，并将其附加到当前脚本中。然后，使用
DOMParser（）.parseFromString（）
方法创建一个新文档。这将解析
xhr.response
，然后获取
元素，最后将其附加到
中

以下是一个例子：


let匹配，点击count=0；
常量regexScript=/（[\s\s]*？）/gi；
常量regexButton=/[\s\s]*？/gi；
让nodeCounter=document.getElementById（'counter'）；
函数getResponse（）{
//模拟来自服务器的响应
return`script type=“application/javascript”let thumbNailStore={concat:function（）{console.log（'；concat for videolist${clickCount}'；）}；function addThumbnailListeners（）{console.log（&'；addThumbnailListeners调用${clickCount}&'；）}thumbNailStore concat（），addThumbnailListeners（），/scriptbutton id=“load next button”onclick=“loadNextPage('https://jsonplaceholder.typicode.com/users/1'；）“加载更多/按钮”；
}
函数htmlDecode（输入）{
var e=document.createElement（'div'）；
e、 innerHTML=输入；
返回e.childNodes[0].nodeValue；；
}
函数加载下一页（uri）{
设xhr=newXMLHttpRequest（）；
xhr.open（'GET'，uri）；
xhr.onload=函数（）{
如果（xhr.status==200）{
//Im正在使用responseTest您应该使用xhr.response
让rawdata=htmlDecode（getResponse（））；
点击计数++
//脚本匹配
matches=Array.from（rawdata.matchAll（regexScript））；
让rawScript=匹配[0][1]；
让inlineScript=document.createTextNode（rawScript）；
//按钮匹配
matches=Array.from（rawdata.matchAll（regexButton））；
让rawButton=匹配[0]；
让script=document.getElementById（'loaded-script'）；
script.innerHTML=''；
script.appendChild（inlineScript）；
让loadNextButton=document.getElementById（'load-next-button'）；
loadNextButton.parentNode.removeChild（loadNextButton）；
设vbw=document.getElementById（'vbw'）；
让doc=newdomparser（）.parseFromString（rawButton，'text/html'）；
//让脚本=doc.body.childNo