前两期分别给大家总结了获取标签的方法和设置样式的方法,如果想具体了解获取标签的方法和设置样式的方法,可以回复“获取标签”和“设置样式”到“HTML5学堂”公众号。在实现页面交互效果的时候,操作标签的内容是必不可少的,所以今天我们要给大家总结的是操作标签的内容。
1 innerHTML与outerHTML属性
2 innerText与outerText属性
3 课后作业
前几期我们接触了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
其它主流浏览器
<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属性替换标签内的所有内容,但是不包含本身(即当前调用的元素);
<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属性,还有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>
火狐浏览器下
其它主流浏览器
<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属性替换标签内的所有内容,但是不包含本身;
<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>
火狐浏览器
其它主流浏览器
效果:九九乘法表
基本要求: