카테고리 보관물: Javascript

Javascript

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