innerHTML 작업 최적화(코드 실행 효율성 향상)_javascript 기술

<script> <br>document.onmousedown = function() { <br>for (var i = 0; ; 10; i ) { <br>var p = document.createElement("p"); <br>p.appendChild(document.createTextNode(Math.random())) <br>document.getElementsByTagName('div' )[0].appendChild(p) <br><br>} <br></body> <br><br> 🎜>참고: Once 구조가 더 복잡하면 표준 DOM을 작성하려면 긴 코드가 필요합니다. <br> innerHTML을 사용하는 경우 코드의 일부는 다음과 같습니다. <br><br><br> </div> <br>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다. <span><a style="CURSOR: pointer" data="18068" class="copybut" id="copybut18068" onclick="doCopy('code18068')"> <u> <script> </u>document.onmousedown = function() { </a>var html = ""; </span>for (var i = 0; i < 10; i ) 🎜>html = "<p>" Math.random() "<p>" </div>document.getElementsByTagName('div')[0].innerHTML = <div class="codebody" id="code18068">}; <br></script&gt ; <br><br> <br>참고: innerHTML에는 표준 DOM에 AppendChild가 없으므로 "=" 메서드가 사용되므로 비효율적입니다. <br>innerHTML과 표준 DOM을 함께 사용할 수 있으므로 두 가지의 장점을 모두 얻을 수 있습니다. 코드의 일부는 다음과 같습니다. <br><br><br><br><br>코드 복사</div> <br><br> 코드는 다음과 같습니다. <br><div class="codetitle"> <span><script> <a style="CURSOR: pointer" data="96042" class="copybut" id="copybut96042" onclick="doCopy('code96042')">document.onmousedown = function() { <u>var html = ""</u>for (var i = 0; i < 10; i ) { </a>html = "<p>" Math.random() "<p>" </span>} </div>var temp = document.createElement ("div"); <div class="codebody" id="code96042"> temp.innerHTML = <br>while (temp.firstChild) { <br>document.getElementsByTagName('div')[0].appendChild(temp.firstChild); } <br>}; <br> </script>


참고: 요소를 생성한 다음 innerHTML을 삽입한 다음 요소에 표준 DOM 작업을 사용합니다.
아직 끝나지 않았습니다. 비동기 innerHTML은 더욱 강력한 솔루션을 제공합니다. 코드의 일부는 다음과 같습니다.




코드 복사