JavaScript 可以通过4种不同的方式在html页面输出数据

1.使用window.alert() 弹出警告框,由于window为js的内置类,可简写为alter()

<script>
alert(5 + 6);
</script>

打开html页面,会弹出告警框,告警框内容显示11

2.使用 document.write() 方法将内容写到 HTML 文档中

使用document.write() 仅仅向文档输出内容,如果在文档已完成加载后再执行document.write,整个 HTML 页面将被输出的内容覆盖。

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>

3.使用innerHTML写入到 HTML 元素

js操作html元素,首先需要找到html元素,找到html元素有三种方法

①通过id:var x=document.getElementById("intro"); x值为[object HTMLParagraphElement]

②通过class类名:var x=document.getElementsByClassName("intro");x值为[object HTMLCollection]

③通过标签名:var x=document.getElementsByTagName("p");x值为[object HTMLCollection]

注意通过id查找是getElement,而通过class和标签名查找时getElements,通过innerHTML只能修改通过id找到的html元素

<h3>我的第一个 Web 页面</h3>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
var x=document.getElementById("demo");
document.write(x+'<br>')
document.write(x.innerHTML);
</script>

4.使用console.log()写入到浏览器的控制台

<script>
var x=5,y=2;
console.log(x+y);
</script>

打开html页面,通过右键-审查元素(不同浏览器名称不同,还可能为检查、审查等),可看到console界面输出计算结果7.

js输出的更多相关文章

  1. JS输出日历

    页面HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  2. 解决js输出汉字乱码问题

    当我们需要使用js输出汉字时,偶然会出现输出的中文汉字乱码的情况,在网上收了很多解决方案 1.在mata中加 <meta content="text/html; charset=utf ...

  3. 创建Vue.js对象:我的第一个Vue.js输出信息

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...

  4. js输出/获得Cookie

    js输出/获得Cookie //方法 1 function setCookie(name, value) { var Days = 365; var exp = new Date(); exp.set ...

  5. 解决js输出汉字乱码的问题

    近期做安卓开发.安卓client调用server页面,可是server编码为gbk,安卓编码为utf-8.导致js输出内容报错,前期的做法是调整js文件编码.可是会生成两个版本号,非常不方便,最后找到 ...

  6. 聊一聊JS输出为[object,object]是怎么回事

    JS输出为[object object] 今天在学习ES6中的 Symbol 数据类型时,在写demo时控制台输出为 Symbol[object object] ,当时有点疑惑,查阅了相关资料后搞清楚 ...

  7. JS 输出

    JS 输出 JavaScript 通常用于操作 HTML 元素. 操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementByI ...

  8. 聊一聊 JS 输出为 [object object] 是怎么回事?

    聊一聊 JS 输出为 [object object] 是怎么回事? 今天在学习ES6中的 Symbol 数据类型时,在写demo时控制台输出为 Symbol[object object] ,当时有点疑 ...

  9. JS 输出与变量

    1. JS的输出 innerHTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  10. JS输出26个英文大小写字母

    JS中可以利用ASCII值 for(var i=0;i<26;i++){ console.log(String.fromCharCode(65+i));//输出A-Z 26个大写字母 } for ...

随机推荐

  1. node微信公众号开发--设置自定义菜单

    var request = require("request"); const querystring = require("querystring"); re ...

  2. Oracle如何查询当前的crs/has自启动状态

    我们知道在某些停机测试场景,是需要人为禁用crs/has的自启动的,防止过程中主机反复重启对数据库集群造成影响. 使用crsctl disable/enable crs命令可以禁用/启用crs的自启动 ...

  3. Flex中如何利用FocusManager类的setFocus函数设置TextInput的焦点的例子

    参考:https://blog.csdn.net/liruizhuang/article/details/5876455 <?xml version="1.0" encodi ...

  4. .NET 黑魔法 - asp.net core 配置文件的"对象存储"

    来,全都是干货. 我们都知道在Framework版本的mvc项目中,配置数据是通过web.config里的appSettings节点配置,我们不得不写一些读取配置文件字符串的类,比如保存在静态的变量中 ...

  5. SQL 跟据出生日期求年龄

    最近做项目时遇到一个问题. 跟据人员的生日与当前日期进行比较求出该人员实际年龄.这个看上去比较简单的问题,其实不细心去看也会有很多问题. 先看第一种: 一张人员信息表里有一人生日(Birthday)列 ...

  6. train_val.prototxt文件和deploy.prototxt文件开头的区别

    1.开头不同 对train_val.prototxt文件来说,开头部分定义训练和测试的网络及参数 对deploy.prototxt文件来说,开头部分定义实际运用场景的配置文件,其参数不定义数据来源,仅 ...

  7. 初识gispro

    因为之前一直用的arcmap,由于项目中用到三维数据的服务发布,需要用到gispro.Gispro与arcmap用法还是有些不同.仅用此文来记录一些简易操作. Gispro简介 ArcGIS Pro是 ...

  8. idea软件上设置爱彼迎字体

  9. python --- 字符编码学习小结

    上半年的KPI,是用python做一个测试桩系统,现在系统框架基本也差不多定下来了.里面有用到新学的工厂设计模式以及以及常用的大牛写框架的业务逻辑和python小技巧.发现之前自己写的代码还是面向过程 ...

  10. 《大话设计模式》c++实现 外观模式

    外观模式:为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 外观模式在什么时候使用呢? 分为三个阶段: (1)首先,在设计初期阶段,应该要有意识的 ...