鍍金池/ 問答/HTML5  HTML/ 如何能不借助容器 將 “node節(jié)點字符串” 插入到頁面

如何能不借助容器 將 “node節(jié)點字符串” 插入到頁面

現(xiàn)有變量 str 

var str = '<img src="xxx.jpg"/>'

我希望把str直接插入到body中

  • 但我目前只掌握一種方法

    var domContainer =  document.createElement('div');
domContainer.innerHTML = str;
document.body.appendChild(domContainer)
  • 這樣做生成的img標簽外面會有一層div 雖然不影響需求實現(xiàn) 但 我想知道 能否直接就node字符串的結構 直接插入到頁面中而不借助容器
回答
編輯回答
葬憶

document.body.innerHTML='<img src="123.jpg">'

2017年3月26日 22:23
編輯回答
空痕

反對樓上的答案，直接修改 document.body 怕不是樓主想要的答案；+= 操作需要重新渲染所有節(jié)點，性能不好。

你可以生成 DOM 節(jié)點后，再把它們從容器里挪出來，比如這樣：

const container = document.createElement('div');
container.innerHTML = str;
while (container.childNodes.length) {
  document.body.appendChild(container.childNodes[0]);
}

不過這樣會多次更新 DOM，也要看具體的需求。

（為了編輯這個答案被聯(lián)盟搞殺了……）

2018年8月14日 22:16
編輯回答
骨殘心
 document.body.innerHTML += str
2017年11月8日 16:57
編輯回答
陌如玉
 function appendDiv() {
      
        var text = '<div>456</div><div>789</div>';
        var divContainer = document.createElement('div');
        var fragment = document.createDocumentFragment();

        divContainer.innerHTML = text;

        while(divContainer.childNodes.length) {
            fragment.appendChild(divContainer.childNodes[0]);
        }


        document.body.appendChild(fragment);
    }
2017年4月5日 04:11