<!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. java中的数据结构(集合|容器)

    对java中的数据结构做一个小小的个人总结,虽然还没有到研究透彻jdk源码的地步.首先.java中为何需要集合的出现?什么需求导致.我想对于面向对象来说,对象适用于描述任何事物,所以为了方便对于对象的 ...

  2. MYSQL 模糊查询

    下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] ...

  3. Vim插件管理器Vundle使用

    参考地址:http://www.linuxidc.com/Linux/2012-12/75684.htm Vundle(Vim bundle) 是一个vim的插件管理器. 其Github地址为: ht ...

  4. physx之刚体运动

    [线性速度与角速度] PxRigidBody的速度由线性速度和角速度构成, 可以分别通过setLinearVelocity和setAngularVelocity进行设置.需要注意的是, 刚体的角速度总 ...

  5. HTML5新增标签

    section标签  <section>标签,定义文档中的节.比如章节.页眉.页脚或文档中的其它部分.一般用于成节的内容,会在文档流中开始一个新的节.它用来表现普通的文档内容或应用区块,通 ...

  6. 常用shell

    常用shell命令 选项 参数 ctrl+alt+f(1-6)字符界面7图形界面 ls 列出当前目录 -a 查看文件的详细信息 -L 查看所有的文件 包括隐藏文件 pwd 查看当前的工作路径 cd 切 ...

  7. 下载历史版本App超详细教程

    有些时候我们需要下载旧版本的 App 进行研究或者其他用途,然而在 iOS 下,苹果的 App Store 里面默认只能下载最新版本的 App,对滴,就是这么任性,不服不行.然而在 Android 里 ...

  8. java 平面上最近两个点之间的距离

    public class ClosestPair{ public static void main(String[] args) { float[][] a = new float[][]{{3, 3 ...

  9. .NET小细节

    1.equals()和运算符==的区别 C#中有两种不同的相等:引用相等和值相等.值相等是两个对象包含相同的值:引用相等是两个对象引用的是同一个对象. “==”操作符比较的是两个变量的值是否相等,或两 ...

  10. 编译MVC解决方案老出现这个问题的原因

    Server Error in '/' Application. The view at '~/Views/Home/Index.cshtml' must derive from WebViewPag ...