<!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属性的更多相关文章

  1. 标签的innerHTML属性和html()

    在新公司开发编码的时候,经常写js代码:有时候就需要往某个标签里添加一些html脚本或者要拿到某个标签里的html脚本,那么就会用到innerHTML和html. 1.innerHTML属性 w3sc ...

  2. HTML DOM innerHTML 属性及实现图片连续播放

    定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法 tablerowObject.innerHTML=HTML 实例 下面的例子返回了表格行的 inner H ...

  3. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  4. innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解

    innerHTML属性用来读取或设置某个节点内的HTML代码. outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内. textContent属性用来读取或设置节点包含的文本内容. ...

  5. InnerHTML属性的XSS利用

    来自:http://www.myhack58.com/Article/html/3/7/2011/32395.htm innerHTML 是个奇怪的HTML属性,不是W3C标准支持的,但几乎所有的厂商 ...

  6. 火狐不支持innerText属性,只支持innerHTML属性

    做的一个js的小程序放到火狐上用不了了,原因是innerText不是标准属性,换成innerHTML属性就好,但是可能需要把html标签给去掉

  7. innerHTML 属性用于获取或替换 HTML 元素的内容。

    innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容. 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.g ...

  8. 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误

    向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...

  9. innerHTML属性的内存和性能问题

    使用innerHTML替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中,问题更加明显.在删除带有时间处理程序或引用了其他js对象子树是,就有可能导致内存占用问题.假设某个元素有一个事件处理程序 ...

随机推荐

  1. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  2. Head First 设计模式-- 总结

    模式汇总:装饰者 :包装一个对象以得到新的行为状态   :封装了基于状态的行为,并使用委托在行为之间切换迭代器 :在对象的结合中游走,而不暴露集合的实现外观   :简化一群类的接口策略   :封装可以 ...

  3. Linux乱码问题解决方案

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  4. js基本类型 引用类型

    参考 https://segmentfault.com/a/1190000005794070 http://blog.csdn.net/yummy_go/article/details/5050468 ...

  5. sqlite字段属性删除方法

    Sqlite 不支持直接修改字段的名称. 我们可以使用别的方法来实现修改字段名. 1.修改原表的名称 ALTER TABLE table RENAME TO tableOld; 2.新建修改字段后的表 ...

  6. SPSS数据分析—Poisson回归模型

    在对数线性模型中,我们假设单元格频数分布为多项式分布,但是还有一类分类变量分布也是经常用到的,就是Poisson分布. Poisson分布是某件事发生次数的概率分布,用于描述单位时间.单位面积.单位空 ...

  7. 采用flask+uwsgi+nginx架构将flask应用程序部署在腾讯云

    最近一星期加班为学校做了一个教师发展中心平台,在此总结一下部署经验 环境:Centos7.0  python2.7.5 1.安装nginx 命令行输入指令:sudo yum install nginx ...

  8. sql练习记录

    三表关联如果字段为0则表示是散客卡 select a.shop_id as id,b.shop_name,a.balance,a.point,(IF(a.card_type_id<>0,c ...

  9. 虚拟机启动linux系统报错,此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态

    在使用虚拟机启动linux的时候报错,如下: 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态. ...

  10. isMobile

    var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: ...