JavaScript - add element

DOM(Document Object Model) - Element 객체 생성 및 추가

document.createElement(nodeName) : 전달값의 태그명을 가진 Element 객체를 생성하여 반환하는 메소드 - 태그 생성

var h2E=document.createElement("h2");//<h2></h2>
alert(h2E);//[object HTMLHeadingElement]

//document.createTextNode(content) : 전달값을 태그내용으로 가진 Text 객체를 생성하여 반환하는 메소드 - 태그내용 생성

var h2T=document.createTextNode("h2 태그의 내용");
alert(h2T);//[object Text]

Node.appendChild(newNode) : Node(Element) 객체의 마지막 자식 Node 객체로 추가하는 메소드

h2E.appendChild(h2T);//<h2>h2 태그의 내용</h2>

document.body : body 태그를 Element 객체로 표현하여 사용 가능 - 웹문서에 하나의 body 태그만 존재

alert(document.body);//[object HTMLBodyElement]
document.body.appendChild(h2E);//DOM Tree에 Node 객체 배치 >> 출력

var imgE=document.createElement("img");//<img>

Element.attributeName : Element 객체의 프로퍼티로 태그의 속성을 표현하여 사용 가능

imgE.src="images/Koala.jpg";//<img src="images/Koala.jpg">
alert(imgE.src);//http://localhost:8000/web/js/images/Koala.jpg - 절대경로
imgE.width="300";//<img src="images/Koala.jpg" width="300">

Element.setAttribute(name, value) : Element 객체의 태그 속성을 변경하는 메소드

imgE.setAttribute("src", "images/Koala.jpg");//<img src="images/Koala.jpg">
//Element.getAttribute(name) : Element 객체의 태그 속성값을 반환하는 메소드
/alert(imgE.getAttribute("src"));//images/Koala.jpg - 상대경로
imgE.setAttribute("width", "300");//<img src="images/Koala.jpg" width="300">

Element 객체를 반환받아 마지막 자식 Element 객체로 태그 배치 - 출력

var imageDiv=document.getElementById("imageDiv");
imageDiv.appendChild(imgE);
var hrE=document.createElement("hr");//<hr>
alert(hrE);//[object HTMLHRElement]

Node.insertBefore(newElement, before) : 기존 Node(Elemet) 객체전에 새로운 Node(Element) 객체를 삽입하는 메소드

document.body.insertBefore(hrE, h2E);