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

我需要给用户一个js代码片段，它会在页面中插入一些HTML代码。如何通过JS嵌入代码嵌入HTML

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

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

2010-07-26 rksprst

如果目标站点使用内容类型application/xhtml+xml，则使用库可能过重，插入DOM元素非常冗长，并且document.write可能不起作用。我认为你最好的选择是使用document.createElement构建一个元素，然后在其上设置innerHTML。

来源

2010-07-26 18:07:17

如果它的简单插入可以使用纯js，否则如果你想提供一些复杂的功能，你可以使用库。在这种情况下，最好的选择是不扩展根对象（数组，函数，字符串）来防止冲突（在noConflict模式下的jQuery，YUI等）。

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

来源

2010-07-26 18:13:07 fantactuka

一个建议：

插入这个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（），如果你可以帮助它。

来源

2010-07-26 18:21:04 donohoe

如果html中有单引号或双引号，会发生什么情况。有没有更好的方法来逃避js而不是用“替换”？ – rksprst 2010-07-26 18:39:50

one nitpick ... html.join（''），如果你将它保持原样，你会得到一堆逗号.. :) – Tracker1 2010-07-26 19:29:21

rksprst：你会遇到这里提出的任何解决方案的问题。答案取决于你的数据来自何处，以何种形式出现，以及如何利用这些优势。 – donohoe 2010-07-27 17:51:57

的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应该是唯一的，以你的脚本的东西。

来源

2010-07-26 18:38:48 Rixius

这[后]（http://alexmarandon.com/articles/web_widget_jquery/）补充您的脚本。 – 2012-01-19 01:53:15

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

回答

相关问题