學習香草JavaScript，for循環

Question

我正在嘗試學習香草JavaScript或純JS，不過你看看它。我開始學習jQuery，現在我正在努力改善我的速度，而沒有框架。我通常只用jQuery就可以得到這個，但是我很難用純JS來做到這一點。

var a = $('.entry-content'),i; 

for (i=0;i<a.length; i++) { 
    var b = a[i].innerHTML; 
    var c = document.createElement('div'); 
    var d = c.id = 'reply_bb'; 
    var e = d.innerHTML = 'Reply'; 
    a[i].innerHTML = a[i].appendChild(c); 
} 

基本上我想要做的是添加一個元素到var元素。

<div class="entry-content"> 
    <div> 
     Words from a poster or whatever would be in side here 
    </div> 
    </div> 

JavaScript之後=

<div class="entry-content"> 
    <div> 
     Words from a poster or whatever would be in side here 
    </div> 
     <div id="reply_bb">Reply</div> 
    </div> 

此外，由於這是相關的。當動態創建元素時，我會使用.click還是.on('click',function() {或者我會怎麼做？我想要它，所以當用戶點擊reply_bb時，它會追加已隱藏在頁面上的另一個元素。

Answer 1

它開始去錯在這裏：

var d = c.id = 'reply_bb'; 
var e = d.innerHTML = 'Reply'; 

d在這一點上是字符串'reply_bb'。因爲d沒有財產.innerHTML。

---

然後，我不知道你想這個做什麼：

a[i].innerHTML = a[i].appendChild(c); 

你要麼設置innerHTML或者追加子。嘗試將innerHTML設置爲附加子元素（這是附加的DOM元素）的結果沒有任何意義。

---

它看起來對我來說，也許你想要的是這樣的：

var items = $('.entry-content'), replyDiv; 

for (var i = 0; i < items.length; i++) { 
    replyDiv = document.createElement('div'); 
    replyDiv.className = 'replyButton'; 
    replyDiv.innerHTML = 'Reply'; 
    items[i].appendChild(replyDiv); 
} 

---

而且，如果你真的想這樣做沒有jQuery的，你可以這樣做：

var items = document.getElementsByClassName('entry-content'), replyDiv; 

for (var i = 0; i < items.length; i++) { 
    replyDiv = document.createElement('div'); 
    replyDiv.className = 'replyButton'; 
    replyDiv.innerHTML = 'Reply'; 
    items[i].appendChild(replyDiv); 
} 

---

在回答您的問題.on() vs .click()，這取決於。這兩個是等效的：

$(item selector).click(fn) 
$(item selector).on('click', fn) 

這兩個工作都可以在您安裝事件處理程序時存在的項目正常工作。我在這裏使用.click()只是因爲它更簡潔。但是，如果您希望事件處理程序的項目尚未存在或將來會創建，那麼您必須使用委託事件處理，在其中已經存在的父項上安裝事件處理程序，並且您不能做到這一點與.click()所以你最好使用.on()這樣的：

$(static parent selector).on('click', '.replyButton', function() { 
    // event handler code here 
})' 

---

其他一些建議：

1. 使用有意義的變量名狀replyDiv和items，而不是a,b,c和d。
2. 不需要時創建中間變量。
3. id值必須是唯一的，所以要麼產生一個唯一的id名稱，要麼改爲使用類名（我的代碼切換到類名）。