document.write()

document.write()是向文档写入内容，参数是一个将要被写入 HTML 文档的字符串

document.write(markup);

类似的还有一个document.wirteln()，只是最后紧跟一个换行符

如果字符串中有标签元素，会被解析并在文档中创建一个对应元素节点

在这里插入图片描述

在这里插入图片描述

但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖

<!-- 这里为了在文档加载后才调用 write() ，需要使用到 加载事件onload -->
<body>
    <h3>原有内容</h3>

    <script>
        var newContent = '<h3>新的内容</h3>'
        document.write(newContent);

        // 文档加载完毕再通过 write() 写入内容
        window.onload = function() {
            document.write('<h3>旧的不走，新的不来</h3>');
        }
    </script>
</body>

在这里插入图片描述

对比上一张图会发现，body中的script的内容也没了，这是因为重写后只保留write()写入的值。事实上，除了主要的几个标签，原有的都没了

document.createElement()

通过document.createElement()可以创建一个元素节点，需要通过document.appendChild()或其他等效的DOM节点操作将创建的新元素节点添加到文档中才能呈现新的节点内容。其参数是新节点的标签名称

document.createElement(tagName);
// 还有个可选参数 options ，为了一些兼容问题，一般不用考虑

在这里插入图片描述

elem.innerHTML

elem.innerHTML是所有元素节点都有的一个属性，给它赋值（字符串）可以往标签元素里添加内容，也可以直接通过该属性获取元素节点的原有内容

如果直接赋值添加内容，会将原有内容覆盖掉

在这里插入图片描述

实际上还可以通过elem.innerHTML = ''达到清空元素内容的效果

三者效率对比

为了对比一下三种方式的效率，分别让它创建1000个超链接

在这里插入图片描述

（相关实现代码见文章源码链接）

结果表明，重复1000次添加超链接，elem.innerHTML是最慢的，但如果直接将一个有1000个超链接的字符串赋值给元素的innerHTML，则可以在很短时间内完成；

使用elem.createElement()和document.write()所用的时间相近，并且经过多次测试发现，elem.createElement()要么和document.write()差不多速度，要么比document.write()慢点，这可能是因为通过elem.createElement()创建元素时，还需要进行添加节点到文档中的操作导致效率低了一点。

总结

以上三种创建元素的方式作用可以是相同的，但实现方式、效率有差异

document.write()和elem.createElement()是方法，但前者只能由document调用，并且是通过将HTML字符串转化为元素节点的方式创建元素，而elem.createElement()是一次创建一个元素节点，并且一定要进行添加节点到文档中的操作才能呈现节点。elem.innerHTML是一个属性，也是通过将HTML字符串转化为元素节点的方式创建元素，在进行重复添加元素节点的操作时，它的效率会低一点

文章源码：https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/js/创建DOM元素的几种方式

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/write
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement

Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

一文读懂AI大模型核心术语：从参数到Agent的完整指南

avatar 2048 AI社区
cover

结合AI大模型的本地知识库搭建方法总结，大模型入门到精通，收藏这篇就足够了！

avatar 2048 AI社区

Paint API之—— Xfermode与PorterDuff详解(三)

本文详解Android中PorterDuff的18种混合模式，包括ADD、CLEAR、DARKEN等，通过公式解析Alpha通道和颜色通道的计算方式。每种模式都配有组合逻辑、处理方式和效果示例说明，如ADD模式会使颜色叠加变亮，CLEAR模式会完全透明化等。文中还提供了与WebView、Socket集成的实战场景，帮助开发者系统掌握PorterDuff混合模式的应用。

avatar 2048 AI社区