我可以使用 Element.insertAdjacentHTML() 插入标签脚本吗答案

【问题标题】：Can I use Element.insertAdjacentHTML() to insert tag script我可以使用 Element.insertAdjacentHTML() 插入标签脚本吗
【发布时间】：2019-12-04 04:16:00
【问题描述】：

我有来自客户端的 node.js 请求。 Node.js 响应字符串

app.post('/verify',cors(issue2options), async (req, res) => {
let auth = await mongo({
    input:'express app',
    data:req.body['auth']['address'],
    type:'verify'
},'get', 'type')

if(empty(auth)){
    res.send(JSON.stringify(`

                                <div id="registration" slot="varan-about"> 
                                Войдите под аккаунтом администратора
                                <script type="module">

                                 console.log('sssss') 

                                <\/script>
                                </div>`))
}else{
    res.send(true)
}

}) 在客户端我将字符串插入到文档['body']

 document['body'].insertAdjacentHTML('afterbegin', `${json}`);

然后我插入字符串脚本不起作用。

是否可以使用这种方法插入脚本？

【问题讨论】：

很难从你的代码中识别出来。由于你正在接收数据，我的第一个猜测是你在信息存在之前调用了 insertAdjacentHTML 。
然后到客户端文档的字符串 ['body'] 为空，我插入此 [<div></div> <script> console.log()</script>] 字符串。我不使用 createElement('script')，但我知道字符串中有标签
对正文使用点符号：document.body 或 document.querySelector('body')，后者不易出错。

标签： javascript html node.js

【解决方案1】：

来自official HTML5 spec：

使用innerHTML 插入的脚本元素在被插入时不会执行插入。

插入相邻的 HTML 与修改特定 DOM 元素的innerHTML 相同。

如果您真的想从服务器返回 html、css 和 javascript 的混合，您可能希望将每个部分放入相应的属性中。例如：{"js": "<Some js here">, "html": "<Some markup here>", "css": "<Some styles here>"} 然后，在客户端，您可以创建一个脚本标签并将您的逻辑内联到它：

var script = document.createElement('script');
script.textContent = data.js;
document.body.appendChild(script);

样式可以用类似的方式处理：

var style = document.createElement('style');
style.textContent = data.css;
document.head.appendChild(style);

最后，可以通过 innerHTML 更改标记，但请记住，这不会删除任何附加到 DOM 元素的事件处理程序，这些处理程序将在解析新 HTML 后被新元素替换：

var someNode = document.querySelector('<some selector>');
someNode.innerHTML = data.html;

【讨论】：

@Sergey，您有机会检查所提议的方法吗？

【解决方案2】：

是的，您可以使用insertAdjacentHTML 使用任何
欲了解更多信息，请访问此页面
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

在你的实现中，我认为你不必在服务器端创建 DOM，只需在 JS 中获取响应并在客户端创建 DOM

喜欢

var p = document.createElement("p");
p.text = 'My new Paragraph :)'

function myFunction() {
  var h = document.getElementById("myH2");
  h.insertAdjacentHTML("afterend", p.text);
}

<h2 id="myH2">My Header</h2>
<button onclick="myFunction()">Insert a paragraph</button>

【讨论】：

您错过了一个事实，即如果您使用 insertAdjacentHTML 将脚本插入到 DOM 中，该脚本将无法工作。这是最初的作者所关心的。 HTML5 规范明确规定：“使用 innerHTML 插入的脚本元素在插入时不会执行。”。 insertAdjacentHTML 与innerHTML 没有什么不同。