JavaScript로 요소를 추가하고 싶습니다.JavaScript로 DOM에 요소를 추가하십시오.
나는 다음과 같은 코드가 있습니다
var collection = document.getElementsByTagName('body');
var a = document.createElement('div');
a.innerHTML = 'some text';
collection.item(0).firstChild.appendChild(a);
간단한 HTML :
<html>
<head></head>
<body>
</body>
</html>
실수입니다?
이것은 당신이 찾고있는 무엇을 수행해야합니다
var newdiv = document.createElement("DIV");
newdiv.appendChild(document.createTextNode("some text"));
document.body.appendChild(newdiv);
첫째, 당신은 document.createElement하여 요소를 만들 수 있습니다. 텍스트 내용을 설정하려면 텍스트를 래핑하는 "텍스트 노드"가 있어야합니다. 그래서, 먼저 그러한 텍스트 노드를 생성하고, 그 노드를 새로운 객체에 (유일한) 자식으로 추가하십시오.
그런 다음 새로 만든 DIV 요소를 DOM 구조에 추가하십시오. document 객체의 속성으로 존재하므로 getElementsByTagName()으로 BODY 요소를 찾을 필요가 없습니다.
해당 브랜드의 새 div를 삽입하려고 할 때 body 태그가 비어있어 아무 것도 추가 할 firstChild가 없으므로 코드가 실패합니다. 당신의 마지막 줄을 변경 :
collection.item(0).appendChild(a);
하지만 난 getElementsByTagName ('XYZ')를 할 때 그것은 단지 예이고 요소를 생성의 createElement ('ABC')를 설정하고 innerHTML을 = "text".... 어떻게 할 수 내가 그랬어? – john
여러개의 요소를 추가 할 때는 항상'documentFragment'를 사용해야합니다. 'documentFragment'는 반복적으로 요소를 추가하고 마침내 DOM에 추가하는 준비 영역의 역할을합니다. DOM에 반복적으로 요소를 추가하면 전체 문서 리플 로우가 발생합니다. 이것을보십시오 : http://ejohn.org/blog/dom-documentfragments/ –