Javascript數組和innerHTML

我剛剛開始使用JavaScript，並且遇到了一些問題。Javascript數組和innerHTML

如何使用innerHTML禮來改變這個元素的文本：

(function showArray(){ 
 
    var names = new Array("Bob ","Alice ","Ceaser ","David"); 
 
    names.sort(); 
 

 
    for (var i = 0; i < names.length; i++) { 
 
    document.getElementById("loop").innerHTML = names[i]; 
 
    // I'm only getting "David" as output!! 
 
    } 
 
})();

<p id="loop">David Alice Bob Ceaser</p>

來源

2014-10-11 Spoofy

變化'的innerHTML =''到的innerHTML + ='。 – 2014-10-11 18:21:36

試試這個，你只需要加入的名字了。

function showArray() { 
 
    var names = new Array("Bob ", "Alice ", "Ceaser ", "David"); 
 
    names.sort(); 
 

 
    document.getElementById("loop").innerHTML = names.join(" "); 
 
} 
 

 
showArray();

<p id="loop">David Alice Bob Ceaser</p>

來源

2014-10-11 16:04:59

+1這是個好主意......;） – 2014-10-11 16:06:35

這個答案有效，但是如果你的意圖是把文本放入DOM節點，你應該使用'innerText'而不是'innerHTML'。這是一個很好的習慣，可以在將來避免代碼注入攻擊，儘管在這個例子中並不重要。 – 2014-10-11 16:16:15

@RaphaelSerota'innerText'不是標準的。它應該是'textContent'。 – Oriol 2014-10-11 16:19:29

在這種情況下，更好地利用Array.prototype.join爲@DaveChen's answer建議。

但是，你不能總是使用它。對於這些情況：

DOM操作很慢。因此，
- 請勿在迴路中使用getElementById。相反，在循環之前將元素存儲在變量中。
- 不要在每次迭代時修改innerHTML。而是更新一個字符串變量，並在循環後僅修改innerHTML。
使用[]創建數組比使用Array構造函數要快，並且它更短。

但是，請注意，使用innerHTML可能會產生html注入。如果您只是想添加文字，請改用textContent。

(function showArray(){ 
 
    var names = ["Bob ","Alice ","Ceaser ","David"], 
 
     el = document.getElementById("loop"), 
 
     html = ''; 
 
    names.sort(); 
 
    for (var i = 0; i < names.length; i++) html += names[i]; 
 
    el.textContent = html; 
 
})();

<p id="loop">David Alice Bob Ceaser</p>

來源

2014-10-11 16:13:49 Oriol

只是爲了記錄：你的代碼可以降低到

(function() { 
 
    document.querySelector("#loop").innerHTML = 
 
     ["Bob ", "Alice ", "Ceaser ", "David"].sort().join(" "); 
 
}())

<p id="loop"></p>

來源

2014-10-11 16:22:25 KooiInc

Javascript數組和innerHTML

回答

相關問題