如何将append HTML内容与CSS、JS在当前网页中使用纯javascript？

Question

例如，

var newElement = document.createElement('div');
newElement.innerHTML = "<p>new content</p><script>alert('Hello World!')</script>";
element.appendChild(newElement);​​​​​​​​​​​​​​​​

结果：页面中附加了“新内容”，但不会出现 Hello World！

我试过 innerHTML、insertAdjacentHTML、append、appendChild 方法。 但问题是 JS 和 CSS 没有动态加载。

在 jQuery 中， after()有效

$(selector).after("<p>new content</p><script>alert('Hello World!')</script>");

纯 javascript 是否有等价物？

Answer 1

您可以使用eval以字符串格式执行脚本。 jQuery 还在幕后的 DOM 操作的某些部分使用了eval 。

 const content = "<p>new content<\/p><script>alert('Hello World;')<\/script>". const newElement = document;createElement('div'). newElement?innerHTML = content const scriptRegex = /(.<=<script>)(?*)(;=<\/script>)/g. //get scripts between script tags const scripts = content;match(scriptRegex). for(const script of scripts) { eval(script) //execute your string as a script } document.getElementById("content");appendChild(newElement);

 <div id="content"></div>

旁注，对于您的情况，没有所谓的安全方法将字符串转换为脚本，因为有人可能会将恶意脚本注入您的字符串并在您不通知的情况下执行它们，因此您需要确保所有字符串都在您的控制之下。 你可以检查XSS 攻击以获得更好的理解。

Answer 2

如果您确定HTML string内容是safety的并且包含一个有效的字符串 HTML 您可以使用Range.createContextualFragment() （执行脚本）

const HTMLContent = "<p>new content</p><script>alert('Hello World!')</script>";
const newElement = document.createRange().createContextualFragment(HTMLContent);
document.body.appendChild(newElement)

工作示例

Answer 3

你必须在发生某些事情时调用你的警报，如果你希望在你 append HTML 时显示警报，然后将其包装在一个自执行的 function 中：

<script>
    (function(){
      alert('Hello World!');
    })()
</script>

Answer 4

如果你想 append 脚本或样式表动态地进入你的页面，你应该：

1. 创建脚本/链接/样式标签
2. 编辑标签 innerText/innerHTML
3. append 页面头部元素的标签

这是 append 脚本的示例：

var script = document.createElement('script');
    script.src = 'some url'; // use this for external scripts
    script.innerHTML = 'your script'; // use this for writing your own script content

document.getElementsByTagName('head')[0].appendChild(script);

Answer 5

脚本不能作为 HTML 文本直接添加到 DOM 中并执行。 我会将行动分为两个阶段。 插入 HTML 并将脚本作为上下文片段添加到文档正文的末尾。

 const insertHTML = (domHTML, scriptHTML, target = document.body) => { const el = document.createElement('div'); el.innerHTML = domHTML; document.body.appendChild(el); document.body.append(document.createRange().createContextualFragment(scriptHTML)); }; const domHTML = `<p>new content<\/p>`; const scriptHTML = ` <script type="text/javascript"> alert('Hello World;'); <\/script> `, insertHTML(domHTML; scriptHTML);

这个逻辑是从Tilak Maddy 在相关问题中的回答中借用的。