◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
总结操作HTML5标签的内容
星期一 2025年3月17日 ntsem 电子商务实战 0人
前两期分别给大家总结了获取标签的方法和设置样式的方法，如果想具体了解获取标签的方法和设置样式的方法，可以回复“获取标签”和“设置样式”到“HTML5学堂”公众号。在实现页面交互效果的时候，操作标签的内容是必不可少的，所以今天我们要给大家总结的是操作标签的内容。
本文内容概要：
1 innerHTML与outerHTML属性
2 innerText与outerText属性
3 课后作业
1 innerHTML与outerHTML属性
前几期我们接触了innerHTML属性，利用它来获取和设置标签的内容，具体我们来看一下innerHTML与outerHTML属性有什么区别？
获取标签内容的实例：
<div class="wrap" id="wrapEle">
<dl>
<dt>梦幻雪冰</dt>
<dd>陈能堡</dd>
</dl>
<dl>
<dt>独行冰海</dt>
<dd>刘国利</dd>
</dl>
</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 利用innerHTML和outerHTML属性获取标签的内容
console.log(wrapObj.innerHTML);
console.log(wrapObj.outerHTML);
</script>
结果：
IE6~8
其它主流浏览器
代码分析：
innerHTML属性能够获取元素内的内容（包含标签），outerHTML属性能够获取元素内的内容（包含标签），但是会包含本身的元素；
IE6~8会将获取到的标签全部转换为大写形式。而谷歌、火狐会将内容按照原来的格式返回HTML，包括空格和缩进；
innerHTML设置标签内容的实例：
<div class="wrap" id="wrapEle">
<dl>
<dt>梦幻雪冰</dt>
<dd>陈能堡</dd>
</dl>
<dl>
<dt>独行冰海</dt>
<dd>刘国利</dd>
</dl>
</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 利用innerHTML属性设置标签的内容
wrapObj.innerHTML = '利用innerHTML属性设置标签的内容';
</script>
结果：
代码分析：
innerHTML属性替换标签内的所有内容，但是不包含本身（即当前调用的元素）；
outerHTML设置标签内容的实例：
<div class="wrap" id="wrapEle">
<dl>
<dt>梦幻雪冰</dt>
<dd>陈能堡</dd>
</dl>
<dl>
<dt>独行冰海</dt>
<dd>刘国利</dd>
</dl>
</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 利用outerHTML属性设置标签的内容
wrapObj.outerHTML = '利用outerHTML属性设置标签的内容';
</script>
结果：
代码分析：
outerHTML属性替换标签内的所有内容，但是也会把本身给替换掉（如：id名为wrapEle的标签被替换了）；
innerHTML与outerHTML属性总结
innerHTML和outerHTML ：能够获取/设置元素的内容（元素内容可以包含标签）；
在获取和设置的时候，innerHTML操作的是标签内的内容，outerHTML操作的是标签内的内容并且包含本身；
IE6~8会将获取到的标签全部转换为大写形式。而谷歌、火狐会将内容按照原来的格式返回HTML，包括空格和缩进；
2 innerText与outerText属性
能够操作标签内容的不仅仅只有innerHTML和outerHTML属性，还有innerText与outerText属性也可以操作标签的内容，具体我们往下看吧。
获取标签内容的实例：
<div class="wrap" id="wrapEle">
<dl>
<dt>梦幻雪冰</dt>
<dd>陈能堡</dd>
</dl>
<dl>
<dt>独行冰海</dt>
<dd>刘国利</dd>
</dl>
</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 利用innerText和outerText属性获取标签的内容
console.log(wrapObj.innerText);
console.log(wrapObj.outerText);
</script>
结果：
火狐浏览器下
其它主流浏览器
代码分析：
innerText与outerText属性获取标签内的内容（不包含标签，只获取文本内容）；
火狐浏览器不支持outerText属性，所以获取的结果为undefined；
innerText设置标签内容的实例：
<div class="wrap" id="wrapEle">
<dl>
<dt>梦幻雪冰</dt>
<dd>陈能堡</dd>
</dl>
<dl>
<dt>独行冰海</dt>
<dd>刘国利</dd>
</dl>
</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 利用innerText属性设置标签的内容
wrapObj.innerText = '利用innerText属性设置标签的内容';
</script>
结果：
代码分析：
innerText属性替换标签内的所有内容，但是不包含本身；
outerText设置标签内容的实例：
<div class="wrap" id="wrapEle">
<dl>
<dt>梦幻雪冰</dt>
<dd>陈能堡</dd>
</dl>
<dl>
<dt>独行冰海</dt>
<dd>刘国利</dd>
</dl>
</div>
<script type="text/javascript">
var wrapObj = document.getElementById('wrapEle');
// 利用outerText属性设置标签的内容
wrapObj.outerText = '利用outerText属性设置标签的内容';
</script>
结果：
火狐浏览器
其它主流浏览器
代码分析：
outerText属性替换标签内的所有内容，但是也会把本身给替换掉（如：id名为wrapEle的标签被替换了）；
因为outerText不被火狐浏览器支持，所以在火狐浏览器下不能使用它操作标签的内容；
innerText与outerText属性总结
innerText ourterText ：能够获取/设置元素的内容（元素内容是文本内容）；
innerText与outerText获取标签内容的时候是具有相同功能；
innerText与outerText设置标签内容的时候，outerText属性替换标签内的所有内容，但是也会把本身给替换掉，innerText属性替换标签内的所有内容，但是不包含本身；
火狐浏览器不支持outerText属性；
3 课后作业
效果：九九乘法表
基本要求：
布局需兼容IE9+、谷歌、火狐等浏览器
初始的结构代码如下：<div class="wrap clearfix"id="box"></div>
JavaScript代码不能超过20行
除非注明，文章均为卓航网络原创，转载请注明本文地址
- 本文标题：总结操作HTML5标签的内容
- 本文地址：http://jl.ntsem.com/post/241.html