바닐라를 배우는 자바 스크립트, for 루프

Question

나는 바닐라 자바 ​​스크립트 또는 순수 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> 

=이 또한 관련이 때문에

<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 속성이 없습니다.

---

그런 다음, 당신이 함께 일을하려고하는지 아무 생각이 없다 : 당신은 어느 innerHTML 설정

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

을하거나 아이를 추가합니다. innerHTML을 자식 (추가 된 DOM 요소)을 추가 한 결과로 설정하려고 시도하는 것은 의미가 없습니다. 당신이 정말로 jQuery를하지 않고이 작업을 수행 할 경우이 작업을 수행 할 수 있습니다,

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

---

그리고 :

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

그것은처럼 나에게 보이는

---

아마도 당신이 원하는 것은 이것이다

---

귀하의 질문에 대한 대답은입니다.대 .click()입니다. 이 두 가지는 다음과 같습니다.

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

두 가지 모두 이벤트 처리기를 설치할 때 존재하는 항목에서 올바르게 작동합니다. 좀 더 간결하기 때문에 여기서 .click()을 사용합니다.

그러나 이벤트 처리기를 사용하려는 항목이 아직 없거나 미래에 생성 될 경우 이미 존재하는 상위 항목에 이벤트 처리기를 설치하는 위임 된 이벤트 처리를 사용해야합니다.

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

---

다른 몇 가지 제안 : 01 같은

1. 를 사용하여 의미있는 변수 이름 때문에이 같은 .on()을 사용하십시오 .click() 함께 할 수 없어및 items이 아니라 a, b, c 및 d이 아닙니다.
2. 필요가 없을 때 중간 변수를 만들지 마십시오.
3. id 값은 고유해야하므로 고유 한 ID 이름을 생성하거나 대신 클래스 이름을 사용하십시오 (내 코드는 클래스 이름으로 전환됨).