操作 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. Exceeded memory limit for $group, but didn't allow external sort. Pass allowDiskUse:true to opt in

    原语句: db.carMongoDTO.aggregate({}}}, {}}}) 报错: Exceeded memory limit for $group, but didn't allow ext ...

  2. Swift 闭包使用(循环引用...）

    class networkTool: NSObject { //定义一个可选类型的闭包,用小括号()?括起闭包 var finishedCallBack2:((_ jsonData:String)-& ...

  3. gem5-gpu全系统模式

    # 注意:安装好gem5-gpu后再配置全系统环境 # 下载全系统模拟需要的工具,详见http://gem5.org/Running_gem5#Full_System_.28FS.29_Mode,将L ...

  4. Delphi 10.4 最新消息

    官方发布了关于10.4的消息,译文如下: 做为我们的Delphi,C ++ Builder和RAD Studio的订阅客户,除了获得更新,升级和技术支持等主要好处外,我们还邀请订阅客户参加Beta计划 ...

  5. 十、React 父组件传来值的类型控制propTypes、父组件如果不传值defaultProps

    父组件给子组件传值时: 1.defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值: 2.propTypes:验证父 ...

  6. word 2007 文档中添加文件

    1. "插入"->"对象",出现的下拉框中选择"对象" 2.弹出界面 3.切换至"由文件创建",点击"浏 ...

  7. Java进阶之路 - 1.走近Java

    Java进阶之路 - 1.走近Java 一.走近Java思维导图

  8. Python爬虫实战（一） 使用urllib库爬取拉勾网数据

    本笔记写于2020年2月4日.Python版本为3.7.4,编辑器是VS code 主要参考资料有: B站视频av44518113 Python官方文档 PS:如果笔记中有任何错误,欢迎在评论中指出, ...

  9. Spring(5) -(14) pointcut 语法

    AOP的规范本应该由SUM公司提出,但是被AOP联盟捷足先登.AOP联盟指定AOP规范,首先就要解决一个问题,怎么表示切入点,也就是在哪些方法上增强(where) AspectJ 是一个面向切面的框架 ...

  10. LIS(最长上升子序列)的 DP 与 （贪心+二分） 两种解法

    正好训练赛来了一道最长递减序列问题,所以好好研究了一下最长递增序列问题. B - Testing the CATCHER Time Limit:1000MS     Memory Limit:3000 ...