html中的innerHTML
2015-12-29 23:04
711 查看
首先看个例子
在这段代码执行之后, 弹窗弹出的内容是下图, 连标签也弹出来了, 那可以想想一下, innerHTML这个属性是指的什么内容, 现在的话可能还不太明显, 再看看下面这段代码
![](http://images2015.cnblogs.com/blog/816015/201512/816015-20151229224245651-1517054242.png)
![](http://images2015.cnblogs.com/blog/816015/201512/816015-20151229225347604-654329866.png)
![](http://images2015.cnblogs.com/blog/816015/201512/816015-20151229225353885-1185904467.png)
点击了之后就变成了右边图片的样子, 其实innerHTML属性也可以用来进行赋值的, 他的作用就是能操作在一个标签对象的开始标签和结束标签中间嵌套的内容, innerHTML这个属性一般多数都是用来取表格中<tr>的数据来的
<html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr1").innerHTML); } </script> </head> <body> <table border="1"> <tr id="tr1"> <th>Firstname</th> <th>Lastname</th> </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>
在这段代码执行之后, 弹窗弹出的内容是下图, 连标签也弹出来了, 那可以想想一下, innerHTML这个属性是指的什么内容, 现在的话可能还不太明显, 再看看下面这段代码
![](http://images2015.cnblogs.com/blog/816015/201512/816015-20151229224245651-1517054242.png)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function add() { document.getElementById("d1").innerHTML = "这是外层div的内容"; alert("添加了内容"); } </script> </head> <body> <div id="d1" style="width:200px;height:200px;background-color:#F00" onclick="add()"></div> </body> </html>
![](http://images2015.cnblogs.com/blog/816015/201512/816015-20151229225347604-654329866.png)
![](http://images2015.cnblogs.com/blog/816015/201512/816015-20151229225353885-1185904467.png)
点击了之后就变成了右边图片的样子, 其实innerHTML属性也可以用来进行赋值的, 他的作用就是能操作在一个标签对象的开始标签和结束标签中间嵌套的内容, innerHTML这个属性一般多数都是用来取表格中<tr>的数据来的
相关文章推荐
- 个人HTML所有标签总结
- HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素
- 关于html页面布局
- 关于html页面布局
- html 冷门
- sublime texthe 和 Dreamweaver 2015 cc 快速生成html的语法搜集大全
- HTMLayout 和 Sciter
- ActiveX(四) mshtml 命名空间 重要接口简介
- 外行学 html - style
- html有序列表和无序列表
- html网页写一个时钟
- html使用ul li 标签实现多级横向菜单
- Html用ul li实现多级横向菜单
- HTML在手机上实现直接拨打电话以及发送短信
- xhtml的块级元素(div)和内联元素(span)
- HTML 页面中的 SVG
- html中meta的介绍
- 运用swt制作一个简易计算器,附加关于html制作网页中的搜索框的一个小知识
- chrome也支持保存成mhtml文件
- HtmlParser【ed2k】