innerHTML属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">您好！</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>
结果是：
如果改为：var mychar=document.getElementById("con").innerHTML;
结果就是：
原因是：前者获取到的是整个对象，后者是获取到其中的内容
---------------------------------------------------------------------------------------------------------------------------------
由比如，将代码改为如下顺序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
<script type="text/javascript">
var mychar=document.getElementById("con").innerHTML;
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</head>
<body>
<p id="con">您好！</p>
</body>
</html>
结果就是：null
原因是：代码是顺序执行的，先调用了JavaScript代码，但是这个时候还没有ID为“con”的元素，得到空
----------------------------------------------------------------------------------------------------------------------
innerHTML属性用于获取或替换HTML元素的内容。语法为：object.innerHTML (注意：区分大小写)
示例：
<html>
<head>.....</head>
<body>
<h2 id="con">原始标题</H2>
<script type="text/javascript">
var mychar=document.getElementById("con"); ;
document.write("原标题:"+mychar.innerHTML+"<br>");
mychar.innerHTML="Hello World!"
document.write("修改后的标题:"+mychar.innerHTML);
</script>
</body>
</html>
结果：原标题：原始标题
修改后的标题：Hello World!
innerHTML属性的更多相关文章
- 标签的innerHTML属性和html()
在新公司开发编码的时候,经常写js代码:有时候就需要往某个标签里添加一些html脚本或者要拿到某个标签里的html脚本,那么就会用到innerHTML和html. 1.innerHTML属性 w3sc ...
- HTML DOM innerHTML 属性及实现图片连续播放
定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法 tablerowObject.innerHTML=HTML 实例 下面的例子返回了表格行的 inner H ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解
innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. ...
- InnerHTML属性的XSS利用
来自:http://www.myhack58.com/Article/html/3/7/2011/32395.htm innerHTML 是个奇怪的HTML属性,不是W3C标准支持的,但几乎所有的厂商 ...
- 火狐不支持innerText属性，只支持innerHTML属性
做的一个js的小程序放到火狐上用不了了,原因是innerText不是标准属性,换成innerHTML属性就好,但是可能需要把html标签给去掉
- innerHTML 属性用于获取或替换 HTML 元素的内容。
innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容. 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.g ...
- 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误
向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...
- innerHTML属性的内存和性能问题
使用innerHTML替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中,问题更加明显.在删除带有时间处理程序或引用了其他js对象子树是,就有可能导致内存占用问题.假设某个元素有一个事件处理程序 ...
随机推荐
- 【java基础】成员变量和局部变量02
成员变量和局部变量(2) 成员变量的初始化和内存中的运行机制 当系统加载类或者创建类的实例的时候,系统会自动为成员变量分配内存空间,并自动指定初始值. package object; ...
- PBOC~PPT-补充内容B(转)
PBOC电子现金基于借记/贷记应用上小额支付的一种实现.在借记卡上可以解释为预付,在贷记卡上可以解释为预先授权.预付的金额或预授权额度在卡片中体现为可脱机消费的金额,也就是电子现金余额.电子现金解决方 ...
- Python_Day7_面向对象学习
1.面向对象编程介绍 2.为什么要用面向对象进行开发? 3.面向对象的特性:封装.继承.多态 4.类.方法. 面向过程 VS 面向对象 编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告 ...
- ROS学习笔记（三）——ROS安装
安装指南: indigo安装 http://wiki.ros.org/indigo/Installation/Ubuntu 中文参考教程: http://wiki.ros.org/cn 1.配置Uba ...
- HADOOP命令介绍
一.用户命令1.archive命令 (1).什么是Hadoop archives?Hadoop archives是特殊的档案格式.一个Hadoop archive对应一个文件系统目录. Hadoop ...
- java数据库连接池技术原理(浅析)
在执行数据库SQL语句时,我们先要进行数据连接:而每次创建新的数据库的连接要消耗大量的资源,这样,大家就想出了数据库连接池技术.它的原理是,在运行过程中,同时打开着一定数量的数据库连接,形成数据连接池 ...
- 设置git 不提交 修改权限的文件
vim .git/config 打开文件
- Sprint three
登录界面: 首页: 点餐界面: 查看购物车: 结账: 经历了一个月的时间,我们小组做出了我们的餐厅点餐系统APP.对于这次团队合作,我们的小组成员分工合作做出了我们的餐厅点餐系统APP,通过这次的项目 ...
- php知识案列分享
今天再跟大家分享一下,以下案列. 使用array_flip函数生成随机数,可以去掉重复值. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ...
- javascript 实现页面加载完再显示页面
document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...