首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

javascript document.write和innerHTML输出不同的值

JavaScript中的document.writeinnerHTML都是用于向HTML文档中插入内容的方法,但它们有一些区别。

document.write是一个直接的方法,它可以在页面加载时直接将内容写入到HTML文档中。它可以在任何位置使用,包括在<script>标签中,也可以在页面加载完成后使用。但是,如果在页面加载完成后使用document.write,它会覆盖整个文档,即使只是插入一小段内容。

innerHTML是一个属性,它可以用来获取或设置HTML元素的内容。通过设置innerHTML属性,可以将内容插入到指定的HTML元素中。与document.write不同,innerHTML可以在页面加载完成后使用,并且不会覆盖整个文档,而是将内容插入到指定的元素中。

总结一下:

  • document.write是一个直接的方法,可以在页面加载时或加载完成后使用,但会覆盖整个文档。
  • innerHTML是一个属性,用于获取或设置HTML元素的内容,可以在页面加载完成后使用,并且不会覆盖整个文档。

在实际应用中,根据具体的需求选择使用document.write还是innerHTML。如果需要在页面加载完成后动态地插入内容,推荐使用innerHTML,因为它更灵活且不会破坏整个文档结构。如果只是在页面加载时插入一些静态内容,可以使用document.write

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一篇文章带你了解avaScript输出

在某些情况下,您可能需要从JavaScript代码生成输出。例如,您可能想查看变量的值,或向浏览器控制台写一条消息,以帮助您调试正在运行的JavaScript代码中的问题,等等。...一、JavaScript显示能力 JavaScript可以使用不同的方法“显示”数据。 写入警报框, 使用 window.alert()。写入HTML输出 使用 document.write()。...使用 document.write() 出于测试目的,使用document.write()更方便 。 例: innerHTML 访问一个HTML元素, JavaScript可以使用 document.getElementById(id) 方法。...三、总结 本文基于JavaScript,介绍了常见4种的输出, “显示的方法” 。对每一种在实际应用的时候,需要注意什么,应该怎么去运用,做了详细的讲解。用丰富的效果图 能够让读者更好的理解。

48320

JavaScript危险函数 - HTML操作

有两种类型的输入源:Direct和Indirect。在接下来的文章中,我们将分析直接/间接输入的各种类型,以及如何利用不正确的编程技术来恶意的JavaScript代码造成的破坏。...接收器:接收器是可以导致或影响客户端代码执行的所有DOM属性,JavaScript函数和其他客户端实体。...函数和诸如innerHTML之类的属性之间的区别 document.write方法:  让我们以document.write(或document.writeln)这样的函数为例来更好地解释Sink,让我们来看看这个函数和例如属性...正如我们所看到的,document.write以直接的方式运行,因为Sink写入(输出)由检查值的用户输入的恶意代码,实际上转到以下URL:       http://示例。...将会有打印屏幕的任务作为参数插入到函数中的数据值,虽然已经通过恶意JavaScript代码的用户参数,然后函数将只无意中在有问题的DOM代码中执行写操作,那么: alert(document.cookie

2.4K80
  • 一篇文章带你了解avaScript输出

    在某些情况下,您可能需要从JavaScript代码生成输出。例如,您可能想查看变量的值,或向浏览器控制台写一条消息,以帮助您调试正在运行的JavaScript代码中的问题,等等。...一、JavaScript显示能力 JavaScript可以使用不同的方法“显示”数据。 写入警报框, 使用 window.alert()。写入HTML输出 使用 document.write()。...使用 document.write() 出于测试目的,使用document.write()更方便 。 例: innerHTML 访问一个HTML元素, JavaScript可以使用 document.getElementById(id) 方法。...要访问Web浏览器的控制台,请先按F12键盘上的键以打开开发人员工具,然后单击控制台选项卡。 ? 三、总结 本文基于JavaScript,介绍了常见4种的输出, “显示的方法” 。

    54720

    DOM基础知识

    1.DOM介绍 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。...(content);//输出:这是内容部分1 document.write(‘’); document.write(val.id);//输出id的值 document.write(‘’)...; val.id=’test’;//设置id的值为test document.write(val.id); document.write(‘’); val.title=’新的标题’; document.write...(0).innerHTML);//这样就会获取到第一个li的内容 document.write(tag.length);//获取到li的总个数 结果就是 第一个li标签3 3.3getElementsByTagName...value);//这样就会获取到第一个name=addin的input标签的value的值 这样就会输出为空 3.4getAttribute()获取元素中某一个属性的值 上面讲到getElementById

    74640

    C语言共用体成员输出的值与赋值时的不同的原因

    共用体成员输出的值与赋值时的不同的原因在使用C语言的共用体时,如果成员输出的值与之前定义共用体变量的时候所赋值的不同,那么很可能是因为定义共用体变量的时候,为共用体的多个成员赋值造成的。...因为共用体虽然允许在同一个内存位置上存储不同的数据类型的变量,但是任何时候都只能有一个成员存储值,也就是说,当共用体内的某一个成员被赋值了,那么其它成员之前所赋的值就会丢失或损坏,这就是造成共用体成员输出的值与赋值时不同的原因了...解决方法分开为C语言共用体的成员赋值,即什么时候使用就什么时候赋值,确切来说,要使用一个新的共用体的成员时,就应该为其赋值。...c; c.id = 2; printf("%d\n",c.id); c.salary = 8000; printf("%d\n",c.salary);}原文:C语言共用体成员输出的值与赋值时的不同的解决方法

    19521

    听说你对 JavaScript 中的输出挺熟?

    前言 在 JavaScript 中,不像 Java 等语言,它没有任何打印或者输出方法的,通常使用如下 4 种方式来输出数据。...使用 window.alert() 用于弹出警告框 使用 document.write() 将内容写入到 HTML 文档中 使用 innerHTML 写入到 HTML 元素 使用 console.log...但是需要注意的是,如果 document.write() 是和其他内容同时在内容加载完之前加载,则可以和其他内容一起显示。...image.png image.png innerHTML JavaScript 如果要访问某一个 HTML 元素,此时可以使用 document.getElementById(id) 方法,然后就可以利用...中输出的有关内容了,虽然不像 Java 那样有类似 System.out.println() 方法来进行打印和输出,但利用上述的 4 种方式,也能基本满足日常开发中的需求了。

    43820

    前端学习——JavaScript基础(一)

    JavaScript document.write() 直接写入HTML输出流 x=document.getElementById(“demo”); // 找到元素 x.innerHTML=“Hello...使用 document.write() 方法将内容写到 HTML 文档中。 使用 innerHTML 写入到 HTML 元素。 使用 console.log() 写入到浏览器的控制台。...typeof 操作符来检测变量的数据类型 JavaScript 对大小写是敏感的。...JavaScript 数据类型 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol(独一无二的值)。...JavaScript 对象 键值对通常写法为 name : value 对象的方法定义了一个函数,并作为对象的属性存储。 对象方法通过添加 () 调用 (作为一个函数)。

    32610

    JavaScript学习(一)

    输出内用””括起,直接输出””号内的内容。 javascript"> document.write("I love javascript!")...javascript"> var mystr="hello"; document.write(mystr); 输出多项内容,内容之间用...3、alert输出内容可以是字符串或变量。 JavaScript-确认 confirm消息对话框通常用于允许永华做选择的动作,如:”你确定吗?“等。弹出对话框(包括一个确定按钮和一个取消按钮)。...如果省略这个参数,或者它的值是空字符串,那么窗口就不会显示任何文档。 2、窗口名称:可选参数,被打开窗口的名称。 1.该名称有字母、数字和下划线字符组成。 2.”...2、注意书写,innerHTML区分大小写。 改变HTML样式 HTML DOM允许JavaScript改变HTML元素的样式。

    3.3K30

    【前端就业课 第一阶段】HTML5 零基础到实战(十)JavaScript基础一篇入门

    会有一个返回值进行返回,值返回后将该值存储到 histr 变量之中,最终使用代码进行输出显示 document.write(histr);。 小媛:原来是这么回事呀。...1_bit:在 JavaScript 中单引号和双引号都可以表示值和字符串,在这里如果我使用了双引号,那么将会与其中的 alert 弹窗所需要显示的文本发生冲突,因为双引号这些都是成对存在的,为了防止冲突...a 加 b 的和,否则将会直接输出 b 的值;最后直接使用 test() 调用函数,最后我们刷新一下这个页面,发现显示出了值为 21,说明 a 值在函数内部也可以去得到。...1_bit:对的,这些值还可以存储为不同类型的数据,例如如下示例。...五、对象 1_bit:在 JavaScript 中对象是很关键的一个概念,你还记得之前有说类和对象这个知识点吗? 小媛:还记得。

    1K20

    E024Web学习笔记-JQuery(二):选择器

    一、基本选择器 1、标签选择器 语法: $("html标签名"),获取所有匹配标签名称的元素 2、id选择器 $("#id值"),获取与指定id匹配的元素 3、类选择器 $(".class的属性值"),...、标签选择器:$("html标签名"),获取所有匹配标签名称的元素 var $divs = $("div"); //2、id选择器:$("#id值"),获取与指定id匹配的元素...var $div1 = $("#div1,#div2,#btn"); //3、类选择器:$(".class的属性值"),获取所有匹配.class的元素 var $ds = $(".d")...==========所有值为s的class==========="); var $spans2 = $("span[class='s']"); for (var j = 0;...[j].innerHTML+""); } //3、符合属性选择器 document.write("============所有带有content属性且值为zb的class

    4500

    【奇淫巧技】Javascript入门笔记,打造最绚丽网页特效!

    Javascript脚本语言同其他编程语言一样,拥有自身的基本数据类型、表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。...document.write('输出内容'); document.write(变量名); document.write(变量名+'输出内容'); //'+'是连接符,相当于php的'.' 5...消息弹窗 alert(变量名); alert('输出内容'); confirm(变量名);confirm('输出内容'); //confirm是带有确定和取消按钮的弹窗,点击确定返回true,...//给变量定义内容 document.write("原标题:"+mychar.innerHTML+""); //打印原内容 mychar.innerHTML...= "New text"; //设置新内容 document.write("修改后的标题:"+mychar.innerHTML); //打印新内容

    1.3K60
    领券