인접한 여러 JavaScript 문자열을 HTML로 삽입하는 방법

함께 공부하겠다는 약속의 일환으로
Beginner JavaScript , JavaScript 운동으로 설계된 일련의 소규모 테스트인 DOM Cardio의 일부로 까다로운 도전을 우연히 발견했습니다. 정말이야!

나는 분명히 JavaScript 초보자이고 이 겉보기에 단순한 도전은 실제로 몇 번의 시도에서 저를 곤경에 빠뜨렸습니다. 많은 사람들에게 간단할 수 있으며 여러 가지 방법으로 해결할 수 있습니다. 어쨌든, 나는 약간의 설명과 함께 내 솔루션을 공유할 것이라고 생각했습니다. 어려움에서 벗어나는 데 도움이 되길 바라며 자신만의 방식으로 문제를 해결하는 방법을 알게 되어 기쁩니다.

JavaScript만 사용할 때의 전반적인 과제는 두 개의 하위 div를 추가할 래퍼 div를 만드는 것입니다. 하나는 세 항목의 정렬되지 않은 목록을 포함하고 다른 하나는 두 단락을 포함합니다.

도전을 무너뜨리다

1. 래퍼 클래스로 div를 만들고 문서 본문에 추가합니다.

이 첫 번째 부분은 너무 문제가 되지 않아야 하며 다음은 우리가 사용할 세 줄의 코드입니다.

const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
document.body.appendChild(wrapper);

2. 세 개의 목록 항목을 포함하는 정렬되지 않은 목록을 만들고 이 목록을 래퍼 안에 넣습니다.

이 다음 단계도 어렵지 않습니다. 빠르고 쉽게 생성할 수 있도록 백틱을 사용합니다.

 const list = `
  <ul>
    <li>list item one</li>
    <li>list item two</li>
    <li>list item three</li>
  </ul>
`;

이제 래퍼 내부에 해당 내용을 추가합니다.

wrapper.innerHTML = (list);

3. HTML 문자열을 사용하여 내부에 두 개의 단락이 있는 다른 div를 만듭니다.

우리는 이미 이것을 하는 방법을 알고 있습니다. 위의 과정을 반복하십시오:

const div = `
  <div class="paragraphs">
    <p>Paragraph One</p>
    <p>Paragraph Two</p>
  </div>
`;

4. 이제 위의 정렬되지 않은 목록 앞에 이 새 div를 삽입합니다.

그리고 여기에서 일이 까다로워졌습니다.............

이제 변수 목록(앞)에 인접한 변수 div(두 단락 포함)를 삽입해야 합니다. 솔루션으로 이동하는 것은 insertAdjacentHTML() 를 사용하는 것이지만 작동하지 않습니다.

왜요?

앞서 코드에서 만든 list 콘텐츠는 HTML이 아니라 문자열이기 때문입니다. 즉, 이 방법으로는 대상을 지정할 수 없습니다...... 아직입니다.

그러면 어떻게?

이 문제를 해결하는 방법은 listElement 를 사용하여 다른 변수querySelector()를 만드는 것이었습니다.

const listElement = document.querySelector('ul');

querySelector() 메서드는 목록 문자열 내의 ul를 대상으로 하고 새 변수listElement(우리가 원하는 대로 호출할 수 있음)는 insertAdjacentHTML() 와 함께 작동하는 유효한 HTML 요소를 보유합니다.

이제 UL 요소를 대상으로 설정한 다음 insertAdjacentHTML()을 사용하여 단락 div를 배치할 수 있습니다.

listElement.insertAdjacentHTML('beforebegin', div);

insertAdjacentHTML()는 삽입점에 대해 두 개의 매개변수('위치' 및 삽입)를 취합니다. 우리는 beforebegin를 삽입 지점으로 사용했기 때문에 목록 앞에 단락을 삽입하고 싶었습니다.

위치 옵션 범위는 다음과 같습니다.

beforebegin = 요소 앞

afterbegin = 요소의 첫 번째 자식 이전

beforeend = 요소의 마지막 자식 이후

afterend = 요소 뒤

연결

MDN Web Docs insertAdjacentHTML
Beginner JavaScript from @wesbos