동적 생성 요소 핸들링 비교 / 추가, 이벤트처리, 값 변경, insertAdjacentHTML, appendChild, innerHTML

동적 생성 요소 핸들링 비교 / 추가, 이벤트처리, 값 변경, insertAdjacentHTML, appendChild, innerHTML

 

javascript 에서 요소를 동적으로 추가하는 방법에는 2가지가 있습니다. 

 

첫 번째, insertAdjacentHTML 을 활용한 방법

HTML String을 만들어 추가하는 방법입니다. 

 

[구문]

element.insertAdjacentHTML(position, htmlText);

position 옵션에는 4가지가 있습니다.

 

beforebegin : element의 전에 삽입
afterbegin : element의 가장 첫번째 child 위치에 삽입
beforeend : element의 가장 마지막 child 위치에 삽입
afterend : element의 다음에 삽입

 

[사용법 예시]

var tbody = element.getElementById("gridTbody");
tbody.insertAdjacentHTML("beforeend", "<tr></tr>");

HTML Text 를 만들어 요소의 원하는 위치에 삽입 할 수 있습니다.

이벤트 등록의 경우 HTML text안에 추가해주시면 됩니다.

 

[이벤트 등록 예시]

var htmlStr = "<tr onclick='javascript:이벤트명()'></tr>";

call, bind, apply 함수도 사용이 가능합니다.

var htmlStr = "<tr onclick='javascript:이벤트명.call(this로 넘길 객체)'></tr>";

 

Link : javascript call, apply, bind 차이점! 알짜만 빼먹기!

javascript call, apply, bind 차이점! 알짜만 빼먹기!

---

두 번째, appendChild 를 활용한 방법

appendChild는 삽입/이동이 가능한 함수 입니다.

 

[구분]

var newElement = element.appendChild(newElement);

newElement가 document상에 존재하는 요소라면 이동이 되고, createElement를 통해서 생성한 새로운 요소라면 삽입이 됩니다.

그리고 삽입/이동한 요소를 리턴합니다.

 

[삽입 예시] 새로 생성한 tr 요소가 gridTbody의 마지막 child 다음에 삽입

var tr = document.createElement("tr");
var tbody = element.getElementById("gridTbody");
tbody.appendChild(tr);

[이동 예시] 기존 id="moveTr" 요소가 gridTbody의 마지막 child 다음으로 이동

var tr = document.getElementById("moveTr");
var tbody = element.getElementById("gridTbody");
tbody.appendChild(tr);

[이벤트 등록 예시]

var tr = document.createElement("tr");
tr.addEventListener("click", function(){
	console.log("클릭");
});
var tbody = element.getElementById("gridTbody");
tbody.appendChild(tr);

요소 복사의 경우 cloneNode를 활용합니다.

 

[cloneNode 구문]

var copyNode = node.cloneNode(copyChildYn);

해당 node만 복사할 경우 copyChildYn에 false를, 자식노드까지 복사할 경우 true를 넘겨줍니다.

복사된 노드를 리턴합니다.

 

---

세 번째, innerHTML 를 활용한 방법

innerHTML은 element의 자식요소 전체를 HTML String으로 변경하거나 가져올 때 사용합니다.

 

[구문]

var content = element.innerHTML; /*HTML String으로 리턴*/
element.innerHTML = HtmlString; /*HTML String으로 변경*/

 

[사용법 예시] 자식 요소 전체 삭제

var tbody = document.getElementById("gridTbody");
tbody.innerHTML = "";

이벤트 처리는 HTML String으로 처리할 때와 같습니다.