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

其他一些建议：

使用有意义的变量名称，例如replyDiv和items，而不是a，b，c和d。
不需要时不要创建中间变量。
id值必须是唯一的，因此要么生成唯一的id名称，要么使用类名称（我的代码切换为类名）。

学习Vanilla JavaScript，for循环

1 个答案: