非侵入式Javascript HTML注入

Question

我正在寻找一个非侵入性的JavaScript / CSS / JS注入页面。 理想情况下，我希望使用document.write，但保留页面上的原始内容。所以做以下事情：

的javascript：文件撰写（＆＃34; blablabla＆＃34）; - 这会删除页面上的所有内容，我不想使用innerHTML + =来附加数据。

有什么建议吗？

Answer 1

如果在文档的onload事件之后调用document.write，则需要重新打开文档 - 有效地截断它。虽然您可以显式调用document.write（）内联（使用javascript直接嵌入页面或使用不使用defer / async的标记），但这被认为是不好的做法，因为它会阻止页面的所有其他处理。

您可以inject elements个人constructing them in Javascript我个人更喜欢将现有占位符的innerHTML设置为HTML片段：

<div id='placeholder/></div>
...
document.getElementById('placeholder').innerHTML="<h2>hello world!</h2>";

（在创建/注入复杂的HTML时，使用createElement会变得混乱和缓慢）

Answer 2

据我所知，

document.write将始终覆盖整个页面。一种选择是将您的代码附加/添加到div或身体的底部。

$(elementObj).append(contents);
//or
$(elementObj).prepend(contents);

您可以使用createElement（）然后使用上述方法之一将代码注入新创建的元素。