Question

我从客户端请求到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)
}

}）在客户端上，我将字符串插入document ['body']

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

但是随后我插入字符串脚本无效。

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

Answer 1

来自official HTML5 spec：

使用innerHTML插入的
script元素在执行时不执行插入。

插入相邻的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;

Answer 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>

我可以使用Element.insertAdjacentHTML（）插入标签脚本

2 个答案: