如何通过JS嵌入代码来嵌入HTML

Question

我需要给用户一个js代码片段，将一些HTML代码插入到页面中。

我想知道最好的方法是什么。我应该使用document.write，还是通过DOM编程创建所有HTML元素？

是否可以使用js库？如果嵌入代码的网页已经包含该库，则可能会发生冲突。

- rksprst

Answer 1

使用库可能太重，插入DOM元素非常冗长，如果目标网站使用application/xhtml+xml内容类型，则document.write可能无法正常工作。我的建议是使用document.createElement构建一个元素，然后在该元素上设置innerHTML。

- Raphael Schweikert

Answer 2

一些建议： 在您希望输出结果的位置插入以下DIV标签：

<div id="uniqueTargetID" style="display: none;"></div>

然后在页面底部添加以下内容：

<script src="snippet.js"></script>

这个文件（无论是远程托管还是其他方式）可以通过以下方式输出简单文本：

var html = [];
html.push('<h1>This is a title</h1>');
html.push('<p>So then she said, thats not a monkey, its a truck!</p>');
html.push('<p>You shoulda seen his face...</p>');
var target = document.getElementById('uniqueTargetID');
target.innerHTML = html.join('');
target.style.display = 'block';

如果可以的话，我会避免使用document.write()。

- donohoe

---

如果HTML中有单引号或双引号，会发生什么？除了用“\”替换“"”之外，是否有更好的方法来转义JS？ - rksprst

一个小问题...如果你保持html.join('')不变，你会得到一堆逗号.. :) - Tracker1

rksprst：无论在这里提出的任何解决方案中，您都会遇到这个问题。答案取决于您的数据来自何处，以什么形式存在以及如何利用它来获得优势。 - donohoe

Answer 3

JavaScript::

//to avoid global bashing
(function(){
  var target = document.getElementById('ScriptName'),
    parent = target.parentElement,
    oput = document.createElement('div');
  oput.innerHTML = "<p>Some Content</p>";
  parent.insertBefore(oput, target);
}());

需要提供给客户/人员的HTML代码：

<script type="text/javascript" id="ScriptName" src="/path/to/ScriptName.js"><script>

ScriptName 应该是你的脚本中独一无二的名称。

- Rixius

---

这个帖子是你脚本的补充。 - Matt Smith

Answer 4

如果只是简单的插入，您可以使用纯JS，否则如果您想提供一些复杂的功能，您可以使用库。在这种情况下，最好选择不扩展根对象（Array、Function、String）以避免冲突的库（jQuery在noConflict模式下，YUI等）。

无论如何，最好避免使用document.write，而是使用现有元素的innerHTML设置或创建新元素。

- fantactuka