삽입된 실행 중 .innerHTML이 있는 요소</h2> <p><script> .innerHTML을 사용하여 요소에 태그를 추가하면 스크립트가 실행되지 않는 경우가 많습니다. 이 문제는 정적 HTML을 삽입하여 브라우저가 그 안에 있는 스크립트를 자동으로 평가하지 못하게 하는 .innerHTML의 고유한 특성으로 인해 발생합니다.</p> <p>이 문제를 해결하려면 삽입된 HTML을 직접 조작하여 동적 프로세스를 생성해야 합니다. 이는 <script>에 대한 브라우저의 기본 동작을 모방합니다. </p> <p>ES6으로 작성된 한 가지 접근 방식은 외부 라이브러리나 복잡한 DOM 수정 없이 순수한 JavaScript를 사용하는 데 중점을 둡니다. 모든 <script> 삽입된 콘텐츠의 요소를 사용하여 동일한 속성과 텍스트 콘텐츠로 새 요소를 생성합니다.</p> <pre>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); }); }</pre> <p>이 솔루션을 사용하려면 현재 .innerHTML 할당을 setInnerHTML에 대한 호출로 바꾸면 됩니다. 업데이트된 코드는 다음과 같습니다.</p> <pre>.innerHTML = HTML; // does *NOT* run `<script>` tags in HTML setInnerHTML(, HTML); // does run `<script>` tags in HTML</pre>
