学习Vanilla JavaScript,for循环

Question

我正在尝试学习Vanilla 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 a元素添加一个元素.

   <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名称,要么使用类名(我的代码切换到类名).