深入理解javascript动态插入技术

前端技术 2023/09/09 JavaScript

最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些位置的空白去掉，见下面运行框的结果：

复制代码 代码如下:


<!doctype html>
<html dir=\"ltr\" lang=\"zh-CN\">
    <head>
        <meta charset=\"utf-8\" />
        <title>
            IE的innerHTML By 司徒正美
        </title>
        <script type=\"text/javascript\">
            window.onload = function() {
                var div = document.createElement(\"div\");
                div.innerHTML = \"   <td>    <b>司徒</b>正美         </td>        \"
                alert(\"|\" + div.innerHTML + \"|\");
                var c = div.childNodes;
                alert(\"生成的节点个数  \" + c.length);
                for(var i=0,n=c.length;i<n;i++){
                      alert(c[i].nodeType);
                      if(c[i].nodeType === 1){
                          alert(\":: \"+c[i].childNodes.length);
                      }
                }       
            }
        </script>
    </head>

    <body>
        <p id=\"p\">
        </p>
    </body>

</html>

本文地址：https://www.stayed.cn/item/24698

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案