innerHTML的使用
2024-08-23 02:48:09
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>
最新文章
- AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案
- Thread Safety线程安全
- 使用NetBeans、Eclipse阅读JDK源码
- SQL内连接与外连接的区别【转】
- 第06篇 MyEclipse 2016 安装/破解
- Objective-C排序算法实现
- 【转】移动互联网应用测试成长技能树V1.0
- JDK5什么是新的堵塞队列线程(四)
- 我喜欢的vs code快捷键for mac
- Python操作MySQL案例
- web前端,多语言切换,data-localize,
- PHP提交表单失败后如何保留填写的信息
- [Big Data - Suro] Netflix开源数据流管理器Suro
- Qt error ------ &#39;XXX&#39; has not been declared
- 关闭centos自动升级内核
- 【转载】java前后端 动静分离,JavaWeb项目为什么我们要放弃jsp?
- 360手机新品牌5月6日公布 周鸿祎席地而坐谈AK47
- Vue 嵌套数组 数组更新视图不更新
- sql server 2005/2008R2 报“红叉”错,即“不允许所请求的注册表访问权”的错误
- day2 Opencv + image