在前面的学习中,如果想要创建一个动态DOM元素,我们都是将元素节点、属性节点、文本节点一个个使用appendChild()等方法拼凑起来。如果插入的元素比较简单,这种方法还可以。要是插入的元素非常复杂的话,就不太适合了。

在JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”,也可以使用innerText属性获取和设置一个元素的“内部文本”。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oImg = document.createElement("img"); oImg.className = "pic"; oImg.src = "images/haizei.png"; oImg.style.border = "1px solid silver"; document.body.appendChild(oImg); } </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

像上面这个例子,如果我们用innerHTML来实现,就非常简单了,代码如下:

document.body.innerHTML = '<img class="pic" src="images/haizei.png" style="border:1px solid silver"/>';

举例:获取innerHTML和innerText

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oP = document.getElementById("content"); document.getElementById("txt1").value = oP.innerHTML; document.getElementById("txt2").value = oP.innerText; } </script> </head> <body> <p id="content"><strong style="color:hotpink;">绿叶学习网</strong></p> innerHTML是:<input id="txt1" type="text"><br /> innerText是:<input id="txt2" type="text"> </body> </html>

浏览器预览效果如图所示。

分析:

从这个例子可以看出,innerHTML获取的是元素内部所有的内容,而innerText获取的仅仅是文本内容。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oDiv = document.getElementsByTagName("div")[0]; oDiv.innerHTML = '<span>绿叶学习网</span>\ <span style="color:hotpink;">JavaScript</span>\ <span style="color:deepskyblue;">入门教程</span>'; } </script> </head> <body> <div></div> </body> </html>

浏览器预览效果如图所示。

分析:

如果让大家使用之前的appendChild()方法来实现,这可真是难为我们这些“程序猿”了。细心的小伙伴可能还注意到了一点,这个例子innerHTML后面的字符串居然可以换行来写!一般情况下,代码里面的字符串是不能换行的,但是为了可读性,我们往往希望将字符串截断分行显示。方法很简单,只需要在字符串每一行后面加上个反斜杠(\)就可以了。这是一个非常实用的小技巧。

对于innerHTML和innerText的区别,我们从下表中就可以很清楚地比较出来。

innerHTML和innerText的区别
HTML代码 innerHTML innerText
绿叶学习网
绿叶学习网 绿叶学习网
绿叶学习网
绿叶学习网 绿叶学习网
<div><em></em></div> <em></em > (空字符串)

常见问题:

1.很多书上不是说innerText兼容不好吗?为什么还要用它呢?

在以前,只有IE、Chrome等都支持innerText,而Firefox不支持。现在Firefox新版本已经全面支持innerText了,对于旧版本的Firefox的兼容性,不需要去理睬。

Web前端速度如此之快,我们都是往前看,而不是往后看的。现在还有谁故意去装一个旧版本的Firefox呢?

事实上,还有一个跟innerText等价的属性,那就是textContent。在以前,为了兼容所有浏览器,我们用的都是这个。当然,现在也可以使用textContent来代替innerText,效果是一样的。不过为了减轻记忆负担,我们记住innerText就行了。innerText,从字面上来看,刚好对应于innerHTML,更容易记住。