[javascript] JavaScript를 사용하여 div에 데이터를 추가하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

JavaScript에서 div를 채우는 div 요소에 데이터를 추가하기 위해 AJAX를 사용하고 있습니다 .div에서 찾은 이전 데이터를 잃지 않고 div에 새 데이터를 추가하는 방법은 무엇입니까?

답변

이 시도:

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

답변

appendChild 사용하기 :

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

innerHTML 사용 :
이 방법은 @BiAiB에서 언급 한대로 기존 요소에 대한 모든 리스너를 제거합니다. 따라서이 버전을 사용하려는 경우주의하십시오.

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>";

답변

주의해서 사용하면 무언가 innerHTML를 잃어 버릴 수 있습니다.

theDiv.innerHTML += 'content',

다음과 같습니다.

theDiv.innerHTML = theDiv.innerHTML + 'content'

그러면 내부의 모든 노드가 파괴 div되고 새로운 노드가 다시 생성됩니다. 내부의 요소에 대한 모든 참조 및 리스너는 손실됩니다 .

예를 들어 클릭 핸들러를 첨부 할 때이를 유지해야하는 경우 DOM 함수 (appendChild, insertAfter, insertBefore)를 사용하여 새 컨텐츠를 추가해야합니다.

var newNode = document.createElement('div');
newNode.innerHTML = data;
theDiv.appendChild( newNode )

답변

당신이 그것을하고 싶은 경우 신속 하고 잃게 참조와 청취자하지 않으려 사용 .insertAdjacentHTML를 () ;

” 사용중인 요소를 재분석 하지 않으므로 요소 내부의 기존 요소를 손상시키지 않습니다 . 추가 직렬화 단계를 피하면 직접적인 innerHTML 조작보다 훨씬 빠릅니다 .”

모든 메인 라인 브라우저 (IE6 +, FF8 +, 기타 및 모바일)에서 지원됩니다 : http://caniuse.com/#feat=insertadjacenthtml

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML의 예

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

답변

jQuery를 사용하는 경우 사용할 $('#mydiv').append('html content')수 있으며 기존 컨텐츠를 유지합니다.

http://api.jquery.com/append/

답변

이것조차도 효과가 있습니다.

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

답변

새 텍스트 노드를 만들지 않고 IE9 + (Vista +) 솔루션 :

var div = document.getElementById("divID");
div.textContent += data + " ";

그러나 각 메시지 후에 새로운 줄이 필요했기 때문에 이것은 나를 위해 속임수를 쓰지 않았으므로 DIV는이 코드로 스타일이 지정된 UL로 바뀌 었습니다.

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

에서 https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :

innerHTML과의 차이점

innerHTML은 이름이 나타내는 HTML을 반환합니다. 종종 요소 내에서 텍스트를 검색하거나 쓰려면 innerHTML을 사용합니다. 대신 textContent를 사용해야합니다. 텍스트가 HTML로 구문 분석되지 않으므로 성능이 향상 될 수 있습니다. 또한 이것은 XSS 공격 경로를 피합니다.