JavaScript는 Div에 데이터 추가

기존 div에 데이터를 추가하려면 요소를 선택한 뒤, 새 값이 일반 텍스트인지 신뢰할 수 있는 HTML인지에 따라 방법을 선택합니다. 일반 텍스트에는 textContent 또는 텍스트 노드를 사용하면 HTML 파싱을 피할 수 있습니다. 마크업을 의도적으로 추가할 때는 insertAdjacentHTML을 사용하세요. 아래 예제는 스크립트가 실행되기 전에 페이지에 <div id="myDiv"> 요소가 있다고 가정합니다. (JavaScript)

추가할 콘텐츠에 맞는 방법 선택하기

사용자 입력이나 다른 일반 텍스트에는 textContent 또는 createTextNode를 사용하세요. 이 API는 < 같은 문자를 마크업으로 해석하지 않고 텍스트를 만듭니다. 텍스트나 속성이 있는 새 요소가 필요하다면 요소를 만든 다음 노드로 추가하세요.

직접 관리하는 HTML 문자열을 요소로 파싱해야 한다면 insertAdjacentHTML을 사용하세요. 내용이 이미 있는 요소에 데이터를 추가할 때는 innerHTML +=를 피하세요. innerHTML의 값을 읽고 다시 설정하면 내용이 다시 파싱되고 하위 노드가 교체됩니다. 교체된 트리에서 기존 하위 노드가 분리되더라도 JavaScript 참조는 계속 그 분리된 노드를 가리킵니다. 이벤트 리스너도 기존 노드에 계속 붙어 있으므로 새로 교체된 노드에는 적용되지 않습니다. 적절한 방법은 일반적인 속도 순위가 아니라 콘텐츠의 종류에 따라 선택해야 합니다.

textContent 또는 appendChild로 일반 텍스트 추가하기

이 예제는 단락을 만들고 텍스트를 지정한 뒤, 새 노드를 선택한 div에 추가합니다. 페이지에 일치하는 요소가 없으면 getElementById는 null을 반환하므로 결과를 사용하기 전에 확인하세요.

대상 요소가 있는 페이지에서 이 예제를 실행하세요:

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    const paragraph = document.createElement("p");
    paragraph.textContent = "A new paragraph.";
    target.appendChild(paragraph);
  }
}

이 브라우저 예제는 제공된 패킷에서 실행되지 않았습니다. 대상 요소가 있으면 텍스트가 들어 있는 단락을 추가합니다. 감싸는 요소가 필요하지 않다면 document.createTextNode("More text")로 텍스트 노드를 직접 만든 뒤, 그 노드를 appendChild에 전달할 수도 있습니다.

insertAdjacentHTML로 HTML 추가하기

대상 요소에서 insertAdjacentHTML을 호출하고 위치와 HTML 문자열을 전달하세요. beforeend는 파싱된 노드를 현재 자식 노드 뒤, div 내부에 배치합니다. 다른 위치로는 afterbegin(내부의 자식 노드 앞), beforebegin(요소 바로 바깥쪽 앞), afterend(요소 바로 바깥쪽 뒤)가 있습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.insertAdjacentHTML("beforeend", "<p>A new paragraph.</p>");
  }
}

이 브라우저 예제는 제공된 패킷에서 실행되지 않았습니다. 전달한 문자열을 HTML로 파싱하려는 경우에만 이 방법을 사용하세요. 신뢰할 수 없는 입력을 정화해 주지는 않습니다. 새 마크업을 div 내부 끝에 추가하려면 beforeend 위치를 사용하세요.

innerHTML은 신중하게 사용하기

innerHTML은 요소의 마크업을 문자열로 보여 줍니다. 문자열을 이어 붙여 다시 할당하면 콘텐츠를 추가하는 것처럼 보일 수 있지만, 브라우저는 요소의 하위 노드를 파싱한 뒤 교체합니다. 기존 하위 노드는 교체된 트리에서 분리되지만 참조는 계속 기존 노드를 가리키고, 이벤트 리스너도 그 노드에 계속 붙어 있습니다. 따라서 기존 리스너는 교체된 노드에 적용되지 않습니다. 브라우저가 값을 마크업으로 처리하므로 신뢰할 수 없는 데이터에 innerHTML을 사용하면 크로스 사이트 스크립팅(XSS) 취약점이 생길 수 있습니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.innerHTML = target.innerHTML + "<p>A new paragraph.</p>";
  }
}

이 브라우저 예제는 제공된 패킷에서 실행되지 않았습니다. 재할당 동작을 보여 주는 예제이며, 기존 자식 노드를 유지하면서 콘텐츠를 추가할 때 권장되는 방법은 아닙니다. 동적으로 생성한 텍스트를 추가하려면 요소를 만들고 textContent에 텍스트를 설정한 다음 요소를 추가하세요.

jQuery로 콘텐츠 추가하기

프로젝트에서 이미 jQuery을 사용한다면 .append()로 일치하는 각 요소의 끝에 콘텐츠를 추가할 수 있습니다. .append()에 전달한 문자열은 HTML로 파싱되므로 신뢰할 수 없는 문자열을 넣지 마세요. 일반 텍스트를 추가하려면 DOM 노드를 만들어 추가하거나, 앞에서 설명한 네이티브 textContent 방법을 사용하세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

if (typeof window !== "undefined" && window.jQuery) {
  const target = jQuery("#myDiv");
  if (target.length) {
    target.append("<p>A new paragraph.</p>");
  }
}

이 브라우저 예제는 제공된 패킷에서 실행되지 않았습니다. jQuery이 로드되어 있고 일치하는 요소가 있어야 합니다. 둘 중 하나라도 없으면 가드가 적용된 코드는 아무 작업도 하지 않습니다.

결과 확인 및 흔한 실수 피하기

선택자가 의도한 요소를 찾는지, 요소를 사용할 수 있게 된 뒤 스크립트가 실행되는지 확인하세요. 예를 들어 div 뒤에 스크립트를 배치하거나 문서가 로드될 때까지 기다릴 수 있습니다. getElementById("myDiv")는 ID로 요소를 선택하며, querySelector("#myDiv")도 같은 요소를 선택하는 방법입니다. 일치하는 요소가 없으면 결과에 메서드를 호출하기 전에 이를 처리해야 합니다.

일반 텍스트에는 textContent 또는 텍스트 노드를 사용해 문자가 텍스트로 유지되도록 하세요. 마크업을 대상 요소 내부 끝에 추가하려면 insertAdjacentHTML("beforeend", html)을 사용하고, 적절한 정책에 따라 HTML을 신뢰하거나 정화하세요. innerHTML +=를 기존 노드를 보존하는 추가 방법으로 취급하지 마세요. 프로젝트에서 이미 jQuery을 사용하고 콘텐츠를 HTML로 파싱해야 할 때만 jQuery의 .append()를 선택하세요. 여기서 다룬 방법은 콘텐츠를 추가하는 작업입니다. 요소를 제거하는 작업은 별도의 DOM 작업입니다.