[2019-10-19 21:49:58 最后更新]
[js]jquery 中 append 函数的原生实现
要在 html 中加一段 html 内容,直接用 document.write(s) 是有问题的。所以一般是用 $(document.body).append(s); 来做。
但如果是不方便使用 jquery 的环境呢? 现在的新浏览器虽然也有了 append 函数,但实际上是不能解析 html 的。其实方法有很多种,可参考
https://www.cnblogs.com/xuanhun/p/9499348.html
我最终用的代码如下:
<script>
function createDocumentFragment(txt) {
const template = "<div class='child'>bbb</div>";
let frag = document.createRange().createContextualFragment(template);
return frag;
}
const container = document.body;//document.getElementById('container');
container.appendChild(createDocumentFragment('hello'));
var parentNode = document.body;
//document.body.append('<div>aaa</div>');
var txtNode = document.createDocumentFragment();
txtNode.interHTML = '<div>aaa2</div>';
parentNode.appendChild(document.createDocumentFragment('hello'))
// parentNode.appendChild(txtNode);
// document.createElement('<div>aaa</div>');
//parentNode.appendChild(document.createTextElement("字符串"));
//parentNode.appendChild(document.createTextElement("字符串"));
</script>