前端中document.write和innerHTML的区别?_document innerhtml-优快云博客

本文链接：https://blog.youkuaiyun.com/zy1992As/article/details/130463812

document.write和innerHTML是JavaScript中用于修改HTML内容的两种常用方法，它们有一些区别。

document.write是document对象的一个方法，它可以直接在文档中插入文本或HTML代码。它的用法是直接在JavaScript代码中使用document.write，并将要插入的内容作为参数传递给它。

　　代码示例：

<script>
  document.write("Hello, World!");
</script>

　　这段代码将在文档加载时直接在页面中插入"Hello, World!"。

　　注意：如果在文档已经加载完成后使用document.write，它会覆盖整个文档内容，所以在常规的前端开发中，一般不推荐在文档加载完成后使用document.write。

　　innerHTML是DOM元素的属性，它用于设置或获取指定元素的HTML内容。可以通过JavaScript选择一个元素，然后使用innerHTML属性修改该元素的内容。

　　代码示例：

<div id="myDiv">Original content</div>

<script>
  var element = document.getElementById("myDiv");
  element.innerHTML = "New content";
</script>

　　这段代码将会修改id为"myDiv"的元素的内容，将原始内容"Original content"替换为"New content"。

　　相比于document.write，innerHTML提供了更多的灵活性，可以在已经加载的文档中选择特定的元素，并对其内容进行更精确的修改。而document.write则是直接在文档中插入文本或HTML代码，不需要指定元素。

　　需要注意的是，如果使用innerHTML修改元素内容，尤其是通过用户输入的内容，应该注意防范XSS(跨站脚本攻击)攻击，即确保插入的内容是安全的，避免执行恶意脚本。