如何通過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

回答

相關問題