学习Vanilla JavaScript，进行循环

Question

I am trying to learn Vanilla JavaScript or pure JS however you look at it. I started off learning jQuery and now I am trying to better my speeds with no framework. I usually can get this with just jQuery but am having a hard time doing this with pure 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);
 }

Basically what I would like to do is add an element to the var a element.

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

After 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>

Also since this is related. When creating an element dynamically would I use .click or .on('click',function() { or how would I go about that? I want it so when the user clicks reply_bb it appends another Element that is already on the page just hidden.

Answer 1

It starts to go wrong here:

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

d at this point is the string 'reply_bb' .

So d has no property .innerHTML .

---

Then, I have no idea what you're trying to do with this:

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

You either set the innerHTML or you append a child. It doesn't make sense to try to set the innerHTML to the result of appending a child (which is the DOM element that was appended).

---

It looks to me like perhaps what you want is this:

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);
}

---

And, if you really want to do this without jQuery, you can do this:

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);
}

---

In answer to your question about .on() vs .click() , it depends. These two are equivalent:

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

Both will work fine on items that exist at the time you install the event handler. I use .click() here just because it's more concise.

But, if the items you want the event handler on don't exist yet or will get created in the future, then you have to use delegated event handling where you install the event handler on a parent that exists already and you cannot do that with .click() so you'd use .on() like this:

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

---

A few other suggestions:

1. Use meaningful variable names like replyDiv and items , not a , b , c , and d .
2. Don't create intermediate variables when there is no need.
3. id values must be unique so either generate a unique id name or use a class name instead (my code switched to a class name).