JavaScript에서 `innerHTML`을 사용할 때 스크립트가 실행되도록 하려면 어떻게 해야 합니까?

.innerHTML로 삽입된 스크립트 실행

innerHTML을 사용하여 요소에 콘텐츠를 삽입하면 삽입된 콘텐츠 내의 스크립트가 실행되지 않는 문제가 발생할 수 있습니다. jQuery 또는 eval을 사용하는 솔루션이 존재하지만 순수 JavaScript를 사용하여 이 문제를 해결하는 코드 조각은 다음과 같습니다.

function setInnerHTML(elm, html) {
  elm.innerHTML = html;

  Array.from(elm.querySelectorAll("script"))
    .forEach(oldScriptEl => {
      const newScriptEl = document.createElement("script");

      Array.from(oldScriptEl.attributes).forEach(attr => {
        newScriptEl.setAttribute(attr.name, attr.value);
      });

      const scriptText = document.createTextNode(oldScriptEl.innerHTML);
      newScriptEl.appendChild(scriptText);

      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
  });
}

이 함수는 요소와 HTML 문자열을 매개변수로 사용합니다. 요소의 innerHTML을 제공된 문자열로 바꾸고 HTML 내의 모든 스크립트 요소를 반복합니다. 각 스크립트 요소에 대해 동일한 속성과 스크립트 텍스트를 사용하여 새 요소를 만듭니다. 마지막으로 이전 스크립트 요소를 새 요소로 대체합니다.

이 기능을 사용하려면 요소의 innerHTML을 설정하면 됩니다.

.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML

위 내용은 JavaScript에서 `innerHTML`을 사용할 때 스크립트가 실행되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!