用Javascript構建字符串document.write

我想從javascript寫入div元素。我想行寫成如下，使用document.write（）：用Javascript構建字符串document.write

<div class="Square15px" onmouseover="changeColor('boxid')"></div>

我打電話與寫的div元素的功能：我試圖執行document.write

<script type="text/javascript"> 
     colorPicker("box1"); 
</script>

（）方法，建立串幾種不同的方法，如：

function colorPicker(box) { 
    var box = document.getElementById(box); 
    var boxid = box.id; 
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor("'; 
    var AquaStr2 = '")></div>'; 

    var AquaString = AquaStr1.concat(boxid, AquaStr2); 
    document.writeln(AquaString); 
}

我也試圖分裂字符串使用+作爲毗連運算許多不同的方式。該字符串在boxid結尾處錯誤地構建。我得到同樣的結果，無論我怎麼寫的代碼塊：

<div class="AquaSquare15px" onmouseover="changeColor(" box1?)=""/>

我似乎只是不能在這裏看到我的錯誤，我已查看了所有的幫助，我能找到。除了引號和box1之間的空格之外，一切都是正確的，直到神祕的問號。我回顧了IE9開發者工具（F12）的結果。我不是一個有經驗的程序員，所以我懷疑自己在某種程度上是錯誤的。

來源

2013-04-25 Jeff Anderson

不要使用'document.write'：http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – Halcyon 2013-04-25 19:08:26

正如在評論部分中指出：你不應該使用document.write。但是，你的字符串連接出錯了。試試這個：

function colorPicker(box) { 
    var boxid = document.getElementById(box).id; 
    var aquaStr = '<div class="AquaSquare15px" onmouseover="changeColor(\''+boxid+'\')"></div>'; 

    document.writeln(aquaStr); 
}

來源

2013-04-25 19:22:13

這會在代碼中最終爲'onmouseover ='changeColor（「+ boxid +」）「'，而不是使用變量'boxid'。 – Guffa 2013-04-25 19:28:57

感謝您指出@Guffa，我更新了我的答案。 – 2013-04-25 19:33:39

謝謝！完美的作品。 – 2013-04-27 14:31:23

我想問題可能是引號。應該是：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\''; 
var AquaStr2 = '\')"></div>';

再說，你不應該有一個新的聲明重寫你的函數參數：

function colorPicker(box) { 
    var box = document.getElementById(box);

而是使用其他名稱，如

function colorPicker(boxid) { 
    var box = document.getElementById(boxid);

隨着中說，它使不通過id得到元素很有意義，之後讀取它的id：

var box = document.getElementById(box); 
var boxid = box.id;

您已將該ID作爲函數參數。

建議結果：

function colorPicker(boxid) { 
    var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\''; 
    var AquaStr2 = '\')"></div>'; 

    var AquaString = AquaStr1.concat(boxid, AquaStr2); 
    document.writeln(AquaString); 
}

正如其他人已經建議，你不應該使用document.write。例如。使用jQuery，而不是看起來類似的東西：

$('body').append(AquaString);

Here is a demo.

來源

2013-04-25 19:17:12

您正在使用的屬性值引號沒有HTML編碼它們。此外，您缺少屬性值的結束引號，因此結束標記和其他一些代碼將在屬性中結束。

可以逃脫引號：

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(&quot;'; 
var AquaStr2 = '&quot;)"></div>';

，或者你可以用省略號代替，但你需要逃避他們在字符串中

var AquaStr1 = '<div class="AquaSquare15px" onmouseover="changeColor(\''; 
var AquaStr2 = '\')"></div>';

來源

2013-04-25 19:21:06 Guffa

用Javascript構建字符串document.write

回答

相關問題