如何使用纯javascript在当前网页中添加带有CSS、JS的HTML内容

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

当发生什么事情时，您必须调用警报，如果您希望在附加HTML时显示警报，则将其封装在一个自动执行函数中：

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

Answer 4

脚本不能作为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在一个相关问题中的回答。

Answer 5

如果您想将脚本或样式表动态附加到页面中，您应该：

1. 创建脚本/链接/样式标记
2. 编辑标记innerText/inerHTML
3. 将标记附加到页面的head元素

下面是一个附加脚本的示例：

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);