JavaScript로 DOM에 추가

JavaScript를 사용하여 DOM에 요소를 추가하는 것이 싫습니다. JavaScript에서는 매번 찾아봐야 하는 jQuery를 사용하면 정말 쉽고 React에서는 정말 쉽기 때문입니다. 저는 JavaScript에서 React를 하지 않기 위해 React를 거의 배웠습니다.

그러나 나는 그것에 대해 게시할 것이라고 생각했습니다. 그러면 내 머리 속에 들어갈 수 있기 때문입니다. 그렇지 않은 경우이 게시물을 찾아 보겠습니다.

추가 어린이

이것은 요소의 끝에 추가됩니다. 이것은 .section 클래스로 div의 끝에 단락을 추가하는 방법입니다.

  const newElement = document.createElement('p');
  const newContent = document.createTextNode('This is a paragraph');
  newElement.appendChild(newContent);
  newElement.classList.add('paragraph');
  document.querySelector('.section').appendChild(newElement);

여기서 각 행이 수행하는 작업:

p 요소를 만들고 싶다고 말하면 여기에 이름을 지정하면 나중에 newElement에서 참조할 수 있습니다. 해당 클래스를 사용하여 선택할 필요 없음

요소에 일부 콘텐츠 추가 - 이 경우 일부 텍스트임

요소에 텍스트 추가

스타일 지정 시 참조할 수 있도록 요소에 클래스 추가

이 새 요소를 .section 끝에 추가

삽입하기 전에

다른 요소 앞에 요소를 삽입합니다.

  const newElement2 = document.createElement('p');
  const newContent2 = document.createTextNode('This is another paragraph');
  newElement2.appendChild(newContent2);
  newElement2.classList.add('paragraph2');
  document.querySelector('.section').insertBefore(newElement2, newElement);

여기서 주요 차이점은 마지막 줄입니다. 상위 요소를 지정한 다음 insertBefore에서 첫 번째 비트가 삽입할 새 요소인 다음 이전에 삽입할 항목을 알려줍니다.

저는 appendChild가 insertBefore보다 더 직관적이라는 것을 알았습니다.