操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素：

例子

通过指定的 id 来访问 HTML 元素，并改变其内容：

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<script>document.getElementById("demo").innerHTML="My First JavaScript";</script>

</body>

</html>

JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容（innerHTML）替换为 "My First JavaScript"。

写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中：

实例

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<script>document.write("<p>我是用js输入的内容http:/http://www.cnblogs.com/lhj-blog/</p>");</script>

</body>

</html>

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML页面将被覆盖：

实例

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script>

function myFunction()

{

document.write("糟糕！文档消失了。");

}

</script>

</body>

</html>

js 输出语句document.write()及动态改变元素中内容innerHTML的使用的更多相关文章

  1. 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值

    Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...

  2. js进阶 11-7 jquery如何获取和改变元素的位置

    js进阶 11-7  jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...

  3. 继承Prototype实现语句不能写在动态原型法中的理解

    阅读javascript高级编程中, 对动态原型法中写Prototype继承父类对象的不可行的现象,不甚理解. 书上说是技术原因,如下有问题代码: 但是把protype语句移到构造函数后面,就OK,如 ...

  4. IOS中用UIFont返回字体的行高、动态改变tableView中Cell的高度

    一.动态改变Cell的高度 1.利用tableView代理方法的返回值决定每一行cell的高度 - (CGFloat)tableView:(UITableView *)tableView height ...

  5. android 动态改变listview的内容

    本文模拟:点击一个按钮,为已有的listview添加一行数据 <?xml version="1.0" encoding="utf-8"?> < ...

  6. JS 之完美运动框架 如何同时改变元素多个属性？

    正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...

  7. Android中动态改变Listview中字体的颜色

    效果如下: 账目显示用的是Listview,要实现的功能为使其根据所在Item是“收入”还是“支出”来把数字设置成绿色或红色 方法是自定义适配器,并重写其中getView()函数,实现如下: //自定 ...

  8. jquery动态改变元素内容

    ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容(包括 HTML 标记) ● val() - 设置或返回表单字段的值(只针对表单或者输入框)

  9. js正则获取html字符串指定的dom元素和内容

    var str = "<div>111<p id='abc'>3333</p></div><div>222<div id=' ...

随机推荐

  1. PowerDesigner创建索引

    防止以后忘记怎么设置索引,记录下来方便查翻 1:选中Table 2:找到Table对应的Indexes 3:选中一条记录,点击红框中的小手(Properties)或双击该记录,进入到详细里面 4:找到 ...

  2. centos下将系统预置yum源更换为阿里云源

    参考:http://mirrors.aliyun.com/help/centos?spm=5176.bbsr150321.0.0.d6ykiD 步骤1:备份/etc/yum.repos.d/下的Cen ...

  3. kafka源码系列之mysql数据增量同步到kafka

    一,架构介绍 生产中由于历史原因web后端,mysql集群,kafka集群(或者其它消息队列)会存在一下三种结构. 1,数据先入mysql集群,再入kafka 数据入mysql集群是不可更改的,如何再 ...

  4. 学习EIGRP 笔记

    CEFFIB(转发信息库,RIB现在运行了CEF,就称之为FIB)show ip cef detail EIGRP的基本组件:1.邻居发现机制2.可靠传输协议(RTP机制)3.DUAL算法4.多种网络 ...

  5. 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...

  6. iOS消息转发

    消息转发是一种功能强大的技术,可以大大增加Objective-C的表现力.什么是消息转发?简而言之,它允许未知的消息被困住并作出反应.换句话说,无论何时发送未知消息,它​​都会以一个很好的包发送到您的 ...

  7. C语言预处理理论-宏定义2

    宏定义21.带参宏和带参函数的区别(1)宏定义是在预处理期间处理的,而函数是在编译期间处理的.这个区别带来的实质差异是:宏定义最终是在调用宏的地方把宏体原地展开,而函数是在调用函数处跳转到函数中去执行 ...

  8. C++编程学习（四）声明/枚举

    一.typedef 声明 typedef 为一个已有的类型取一个新的名字 typedef int num;//feet是int的另一个名字num a;//a是int类型 二.枚举类型 enum col ...

  9. ntp时间同步服务器

    [root@localhost ~]# ntpdate time.nist.gov 虚拟机时间不对   自动同步   sudo ntpdate asia.pool.ntp.org 要是同步后时间还是不 ...

  10. 当chart图遇上bootstrap的TAB切换 无宽高问题？

    .tab-content > .tab-pane, .pill-content > .pill-pane {    display: block; /* undo display:none ...