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

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 공격 경로를 피합니다.

jQuery를 사용할 수 있습니다. 매우 간단합니다.

jQuery 파일을 다운로드하면 HTML에 jQuery를 추가
하거나 온라인 사용자 링크를 사용할 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

이것을 시도하십시오 :

 $("#divID").append(data);

다음 방법은 다른 방법보다 덜 일반적이지만 div의 마지막 자식 노드가 이미 텍스트 노드임을 확신 할 때 좋습니다. 이런 식으로 MDN 참조 AppendData를 사용하여 새 텍스트 노드를 만들지 않습니다appendData

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;

if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

왜 setAttribute를 사용하지 않습니까?

thisDiv.setAttribute('attrName','data you wish to append');

그런 다음이 데이터를 얻을 수 있습니다 :

thisDiv.attrName;

자바 스크립트

document.getElementById("divID").html("this text will be added to div");

jquery

$("#divID").html("this text will be added to div");

.html()입력 한 내용을 인수없이 사용하십시오 . 브라우저 콘솔을 사용하여 이러한 기능을 코드에서 사용하기 전에 신속하게 테스트 할 수 있습니다.