innerHTML误区

添加元素

innerHTML属性是个经常用到的原生属性.将html元素用字符串形式设置到父元素中,经常用于将动态拼接的html文本,显示在父容器里.

拼html字符串的办法已经被认为不妥,正经的办法是使用appendChild()或者createDocumentFragment().不过对于少量的html,当然也能用.

以前用jQuery库,对应的方法是$('#id').html(),在使用原生属性时,发现与jquery行为有所不同.

这可能是原生innerHTML属性在执行时,有判断过程.会判断父元素是否可以接受html文本.而jQuery已经处理过这个问题,它的html()方法分析过html字符串.

以下测试在谷歌浏览器80+版本,x64.

将div的子元素换成a标记

    <div id = "div1"></div>

    let div = document.getElementById('div1');
    div.innerHTML = '<a>link</a>';

    // 结果
    <div class="btn" id="div1"><a>link</a></div>

 

这是预期的结果,div里可以放a.如果换成tr就不能成功.

    div.innerHTML = '<tr><td>data</td></tr>';
    
    // 结果 没有加进去
    <div id = "div1"></div>

 

tr是表格table里的子元素,如果div换成table呢

    <table id="tab1"></table>

    let tab = document.getElementById('tab1');
    tab.innerHTML = '<tr><td>data</td></tr>';

    // 结果
    <table id="tab1"><tbody><tr><td>data</td></tr></tbody></table>

 

成功了.不过不太一样,table里多了一个tbody元素,而innerHTML时并没有这个tbody.这是原生innerHTML属性自己的行为.

可见,innerHTML也会分析设置的html字符串,如果发现"不合法"的,会拒绝加入.

使用html对象而不是字符串,可以实现预期效果

    let tr = document.createElement('tr');
    tr.innerHTML = '<td>data</td>';
    tab.appendChild(tr);

    // 结果
    <table id="tab1"><tr><td>data</td></tr></table>

 

建立tr元素对象,使用appendChild(tr)加到table,结果里没有tboby元素.

在项目中还是减少使用innerHTML,使用正规的appendChild()和createDocumentFragment()

执行js

当innerHTML一段html里包含js时,是不会执行的.最常见的情况是,从服务器ajax一段包含html,js的页面片段,使用innerHTML设置到容器div,结果js不执行.

如果使用jQuery的$('#id').html() 方法,不会有这个问题.js执行了.显然,jQuery的html()方法是做了工作的.查看源码时,发现jQuery解析了html字符串.

innerHTML里的js不执行,可能和浏览器的机制有关.innerHTML里的js可能被当成一般的文本了,所以不执行.

对于一段html,js混合的文本,尝试过以下方法可以让js执行.

一. 使用createContextualFragment()方法

    let htmlString='<div>let range = document.createRange();</div><script src="abc.js"><\/script><script>console.log("hello world")<\/script>';
    
    // 低版本浏览器不支持这个方法
    let range = document.createRange();
    let fragment = range.createContextualFragment(htmlString);

    document.body.appendChild(fragment);

这个方法解析htmlString,然后返回DocumentFragment对象,加到文档后,js会执行.

但是有一个问题,执行时没有按script标记的顺序.先执行了第二个script,后执行的abc.js

二. 解析法

使用js生成新的script标记,再添加到文档,是可以执行的.这个办法是分析htmlString,将script找出来,再重新生成一次.

为了让js顺序执行,可以在解析时将外联的js下载,变成内联的.具体做法,递归解析htmlString.

这段代码解析html字符串,返回一个文档片段对象,里面的js标记是重新生成的,对于外联会下载成内联,顺序执行.

代码有局限.html字符串中的script标记只能是第一子节点,不能包含在其它dom元素内,因为递归方法只遍历了子节点,没有遍历后代节点.

只能满足相对简单的script标记顺序执行,对于有复杂依赖的js,也不能保证顺序执行.

    // 解析html, val:html字符串 ,onReady:解析完成后的文档片段对象
    function parseHtml = (val, onReady) => {
      let framgSource;
      if (typeof val === 'string') {
          let range = document.createRange();
          framgSource = range.createContextualFragment(val);
      } else if (val instanceof DocumentFragment) {
          framgSource = val;
      } else if (val.length) {
          framgSource = document.createDocumentFragment();
          framgSource.append(...val);
      } else {
          framgSource = document.createDocumentFragment();
          framgSource.append(val);
      }
      // 放入fragment.(解析放入)
      let fragment = document.createDocumentFragment();
      _parseHtmlNodeLoad(fragment, framgSource, onReady);
    };

    // 递归
    function _parseHtmlNodeLoad = (toFragm, fromFragm, onReady) => {
        if (fromFragm.firstChild === null) {
            onReady(toFragm);
            return;
        }
        // script元素.设置到innerhtml时不会执行,要新建一个script对象,再添加
        if (fromFragm.firstChild.nodeName === 'SCRIPT') {
            let newScript = document.createElement('script');
            let src = fromFragm.firstChild.src;
            if (src) {
                // 外联的script,要加载下来,否则有执行顺序问题.外联的没有加载完,内联的就执行了.如果内联js依赖外联则出错.
                // 这个办法是获取js脚本,是设置到生成的script标签中.(变成内联的了)
                fetch(src).then(res => res.text())
                    .then((js) => {
                        newScript.innerHTML = js;
                        toFragm.append(newScript);
                        fromFragm.removeChild(fromFragm.firstChild);
                        _parseHtmlNodeLoad(toFragm, fromFragm, onReady);
                    });
            } else {
                // 内联的直接设置innerHtml
                newScript.innerHTML = fromFragm.firstChild.innerHTML;
                toFragm.append(newScript);
                fromFragm.removeChild(fromFragm.firstChild);
                _parseHtmlNodeLoad(toFragm, fromFragm, onReady);
            }
        } else {
            // 其它元素
            toFragm.append(fromFragm.firstChild);
            _parseHtmlNodeLoad(toFragm, fromFragm, onReady);
        }
    };

缓存文档片段

有时需要将文档中的一部分dom缓存起来,需要时再加入文档中.

由于innerHTML是字符串,所以一些dom的属性不会保存.比如select元素,在缓存前选择了"two",使用innerHTML缓存在还原时,选择会变成默认的"one".

使用node.cloneNode(true)复制节点方法也不行,也保存不了select元素的选中状态.

可以使用DocumentFragment对象的append()方法,添加这个div后,div会脱离文档,缓存到文档片段对象中.在放入文档中,它的状态不变.

这个办法没有"加工"要缓存的元素,只是将它移动了位置.从文档对象移动到文档片段对象.

    // select 选择了two
    <select>
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
    </select>

    // 使用innerHTML,将div的所有子元素存到变量中
    let dom = div.innerHTML;
    div.innerHTML = '';

    // 还原 (选择状态会丢失)
    div.innerHTML = dom;

    // cloneNode(true) (复制select节点,选择状态也会丢失)
    dom = div.cloneNode(true);
    div.append(dom);

    // 使用DocumentFragment对象的append()添加到文档片段对象,再放入文档中,状态不变.
    dom = document.createDocumentFragment();
    dom.append(div);
    div.append(dom);