innerHTML的使用
inerHTML是html标签的属性，成对出现的标签大多数都有这个属性，用来设置或获取位于对象起始和结束标签
内的HTML。（获取HTML当前标签的起始和结束里面的内容）不包括标签本身。
语法：tablerowObject.innerHTML=HTML
下面的例子返回了表格行的 inner HTML：
<html>
<head>
<script type="text/javascript">
function getInnerHTML() {
alert(document.getElementById("tr1").innerHTML);
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1"><td>Firstname</td><td>Lastname</td></tr>
<tr id="tr2"><td>Peter</td><td>Griffin</td></tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />
</body>
</html>
运行结果:
<td>Firstname</td>
<td>Lastname</td>
注意：innerHTML不可写为innerHtml或是其他形式，大小写要严格遵守，不然无法获取或者设置数据。 innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.运行如下的一个测试代码就可以发现了.
document.getElementById("AlbumList").innerHTML="<table><tr>";
alert(document.getElementById("AlbumList").innerHTML); 补充说明：
OUTERHTML是把对象本身包含子对象清空,然后在它这个位置插入新的内容,
而INNERTEXT却是插入文本,当包含有如<等HTML格式符的关键字符时,会自动转义,反正你插入的内容全显示,而XHTML即当做一段HTML来解释,HTML格式代码是不会显示的,
下面是一个网上朋友弄的不错的测试,
<html>
<head>
<title>无标题</title>
<head>
<body>
在下面输入你要替换的内容,文本或HTML
<textarea id=mytext style="width:100; height:200"></textarea>
<input type=button value=innerHTML onclick=myreplace(this.value)>
<input type=button value=innerText onclick=myreplace(this.value)>
<input type=button value=outerHTML onclick=myreplace(this.value)>
<input type=button value=outerText onclick=myreplace(this.value)>
<script language ='javascript'>
<!--
function myreplace(how)
{
if(document.getElementById("show") == null)
document.body.insertAdjacentHTML( 'beforeEnd', "<div id=show title=显示区域><input value=显示区域></div>");
switch(how)
{
case "innerHTML":
alert("未使用INNERHTML前的SHOW这个DIV的HTML代码如下:\n" + show.outerHTML);
show.innerHTML = mytext.value;
alert("使用INNERHTML的SHOW这个DIV的HTML代码如下:\n" + show.outerHTML);
break;
case "innerText":
alert("未使用INNERtext前的SHOW这个DIV的HTML代码如下:\n" + show.outerHTML);
show.innerText = mytext.value;
alert("使用INNERtext的SHOW这个DIV的HTML代码如下:\n" + show.outerHTML);
break;
case "outerHTML":
alert("未使用outerhtml前的SHOW这个DIV的HTML代码如下:注意,用这个后,SHOW对象将不存在\n" + document.body.outerHTML);
show.outerHTML = mytext.value;
alert("使用outerHTML的SHOW这个DIV的HTML代码如下:\n" + document.body.outerHTML);
break;
case "outerText":
alert("未使用outertext前的SHOW这个DIV的HTML代码如下:注意,用这个后,SHOW对象将不存在\n" + document.body.outerHTML);
show.outerText = mytext.value
alert("使用outertext的SHOW这个DIV的HTML代码如下:\n" + document.body.outerHTML);
break;
}
}
//-->
</script>
下面为效果显示区域:
</body>
</html>
innerHTML的使用的更多相关文章
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- innerHTML和innerText的区别
以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...
- textarea 中的 innerHTML 和 value
<textarea></textarea> <input type="button" value="click" /> &l ...
- innerHTML on ie6-9
https://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx The innerHTML property is read-only on ...
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML与innerText的异同
在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...
- c#使用正则表达式抓取a标签的链接和innerhtml
//读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...
- innerHTML 与 innerText 的区别
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...
- html()、text()、val()、innerHTML、value()的区分
以上的方法可用于一般的html标签(div)与input中分别进行讨论 1.html(): jQuery方法,用于一般标签中,可读写,可以获得写入html标签. 2.text(): jQuery方法, ...
- innerHTML、innerText、outerHTML、outerText的区别
我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...
随机推荐
- TCP可靠数据传输
TCP可靠数据传输 在TCP在IP不可靠的尽力而为的服务之上,创建了一条可靠数据传输服务(reliable data transfer service).TCP提供的可靠数据传输的方法涉及到可靠数 ...
- Java设计模式学习记录-观察者模式
前言 观察者模式也是对象行为模式的一种,又叫做发表-订阅(Publish/Subscribe)模式.模型-视图(Model/View)模式. 咱们目前用的最多的就是各种MQ(Message Queue ...
- 从2PC到Paxos
在分布式系统中,一个事务可能涉及到集群中的多个节点.单个节点很容易知道自己执行的事务成功还是失败,但因为网络不可靠难以了解其它节点的执行状态(可能事务执行成功但网络访问超时). 若部分节点事务执行失败 ...
- C# Task用法
1.Task的优势 ThreadPool相比Thread来说具备了很多优势,但是ThreadPool却又存在一些使用上的不方便.比如: ◆ ThreadPool不支持线程的取消.完成.失败通知等交互性 ...
- EF to Sqlite
测试下来,使用到下面的版本: EF6.1 System.Data.SQLite.EF6.1.0.93.0 System.Data.SQLite.Core.1.0.93.0 注意事项: 设置Autoi ...
- Webapi创建和使用 以及填坑(三)
WebApi使用填坑 前面工作跟别人做数据对接,因为我们是对接方所以东西都得按照他们的要求进行修改,于是给自己挖了很多坑,其实更多的都是自己能力还不够,在这里也做一个笔记了. 请求类型:applica ...
- 再谈 C# 对象二进制序列化，序列化并进行 AES 加密
对象的二进制序列化非常有用,也非常方便. 我们可以把对象序列化为字节数组,也可以把对象序列化到文件,还可以把对象序列化到文件并进行加密. 先引用这些命名空间: using System.IO;usin ...
- Spring核心——设计模式与IoC
“Spring”——每一个Javaer开发者都绕不开的字眼,从21世纪第一个十年国内异常活跃的SSH框架,到现在以Spring Boot作为入口粘合了各种应用.Spring现在已经完成了从web入口到 ...
- 函数多个返回值与unpack的用法
-- return the index of max number and himself -- 函数可以返回多个值 function get_max( T ) ] for i, v in ipair ...
- Less 结合 nth-child 选择器循环生成样式
问题描述: 实现头像的堆叠效果 从第二个头像开始,每个头像都会盖住前一个头像上,遮盖的宽度为 30px 实现叠加的方式有很多,比如给每个头像添加 translateX 属性,或者使用负值 margin ...