JavaScript: Element의 동적 추가와 삭제

동적으로 Element 추가하고 삭제하는 방법

addElement()

Child node를 parent element에 붙여서 element를 생성하는 방식이다. Parent element를 명시하기 위해 parentId 를 사용하고, 어떤 종류의 element(p, h1, div 등...)를 만들고 싶은지는 elementTag로 명시한다.

• parentId
• elementTag
• elementId
• html

//동적으로 element document에 추가하는 법
function addElement(parentId, elementTag, elementId, html) {
    var p = document.getElementById(parentId);
    var newElement = document.createElement(elementTag);
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;	//새로 만든 element의 html content를 지정
    p.appendChild(newElement);
}

removeElement()

삭제하고자 하는 element의 id만 있으면 된다

function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}

연습 예제)

Add File 버튼을 누르면 파일 선택하는 element가 동적으로 추가되도록 만들기

var fileId=0;	//새로 추가할 파일에 계속해서 다른 id를 부여하는 방법
	function addFile() {
      fileId++; // increment fileId to get a unique ID for the new element
      var html = '<input type="file" name="uploaded_files[]" /> ' +
                 '<a href="" onclick="javascript:removeElement("file-" + fileId + ""); return false;">Remove</a>';
      addElement('files', 'p', 'file-' + fileId, html);
   }

참고 사이트: https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript

Adding and Removing Elements on the Fly Using JavaScript