새 요소를 추가 한 후 JavaScript가 작동하지 않습니다.

JavaScript로 새 요소를 추가 할 때 문제가 있습니다. 나는 jQuery 나 다른 어떤 라이브러리도 사용하지 않는다. 이것을 수행하는 동안 네이티브 JavaScript를 사용하고있다.새 요소를 추가 한 후 JavaScript가 작동하지 않습니다.

그래, 난 <body> 태그에 새 요소를 추가하려고합니다. jQuery에서 .append() 함수를 사용할 수 있지만 기본 JavaScript를 사용하는 경우 .innerHTML을 사용해야합니다.

여기에 내가 그것의 '추가'버튼을 처음 작동 클릭하면

<button id="add"> 
Add 
</button>

가 여기 내 자바 스크립트 코드

document.getElementById("add").addEventListener("click", (e) => { 
    document.getElementsByTagName("body")[0].innerHTML += '<p>Hello world</p>'; 
});

의 내 HTML 코드입니다. 하지만 다시 클릭하면 작동하지 않습니다. jQuery를 사용하여 새 요소를 추가하려고하면 작동하지만 더 적은 수는 있습니까?

출처

2017-10-20 int11

*하지만 당신을 한 경우 * 당신은'innerHTML'를 사용해야합니다 네이티브 자바 스크립트를 사용하는 경우 그걸 배워라? –

[하위 항목의 이벤트 리스너를 삭제하지 않고 innerHTML에 추가 할 수 있습니까?] (https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying -descendants-event-list) – Xufox

재미있는 사실 : jquery가 innerHTML을 사용하고 있지 않습니다. – GottZ

신체의 전체 내용을 모든 새로운 내용으로 대체하고 요소 및 모든 이벤트를 지우는 것입니다.

.innerHTML을 덮어 쓰지 마십시오. .appendChild() 사용하여 하나 개 이상의 항목을 추가 할 거라면

document.getElementById('add').addEventListener('click', function() { 
 
    var p = document.createElement('p'); 
 
    p.textContent = 'Hello world'; 
 

 
    document.body.appendChild(p); 
 
});

<button id="add">Add</button>

출처

2017-10-20 19:02:17 JLRishe

와우, 이제 새로운 요소를 추가하는 올바른 방법을 알았습니다. 감사합니다. 선생님! – int11

는이


 
document.getElementById("add").addEventListener("click", (e) => { 
 
\t 
 
document.getElementById("k").innerHTML += '<p>Hello world</p>'; 
 

 
});

<button id="add"> 
 
Add 
 
</button> 
 
<div id= "k"></div>

출처

2017-10-20 19:12:18

을 시도하거나, 문서 조각을 만들 그 모든 예비 작업을 수행 한 다음 DOM에 추가하십시오. 이 방법의 장점은 DOM이 한 번만 다시 그려지는 것입니다. 예 :

var frag = document.createDocumentFragment(); 

var topSquare = document.createElement('div'); 
frag.appendChild(topSquare); 

var rightSquare = document.createElement('div'); 
frag.appendChild(rightSquare); 

document.getElementsByTagName('body')[0].appendChild(frag);

또는 당신이 절대적으로 어떤 이유로 HTML 문자열을 사용하는 경우,이 방법을 사용 :

var htmlString = '<p>Hello world</p>'; 
var para = document.createRange().createContextualFragment(htmlString); 
document.getElementsByTagName('body')[0].appendChild(para);

출처

2017-10-20 19:19:32 Tom

새 요소를 추가 한 후 JavaScript가 작동하지 않습니다.

답변

관련 문제