在之前的學習中，我們可以使用apendChild()方法在一個元素節點內部插入一個節點，但是這種方法使用麻煩，並且只能一個個把子節點插進去。
在JavaScript中，我們可以使用innerHTML和innerText這2個屬性很方便地獲取和設置某一個元素內部子元素或文本。
innerHTML屬性被多數浏覽器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。
innerHTML屬性聲明了元素含有的HTML文本，不包括元素本身的開始標記和結束標記。設置該屬性可以用於為指定的HTML文本替換元素的內容。
innerText屬性與inerHTML屬性的功能類似，只是該屬性只能聲明元素包含的文本內容。即使指定的是HTML文本，它也會認為是普通文本而原樣輸出。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="lvye"><strong> 學習網</strong></div>
innerHTML內容是：<input id="txt1" type="text"><br/>
innerText內容是：<input id="txt2" type="text">
<script type="text/javascript">
var e = document.getElementById("lvye");
document.getElementById("txt1").value = e.innerHTML;
document.getElementById("txt2").value = e.innerText;
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
上面例子使用innerHTML和innerText來獲取某個元素節點內部信息，當然我們也可以使用這2個屬性來設置某個元素節點內部信息。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="lvye"></div>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.innerHTML="<span style='color:red;font-weight:bold;'> 學習網</span><span style='color:blue;font-weight:bold;'>JavaScript入門教程</span>";
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
假如我們使用之前的appendChild()方法來實現，這可真是難為我們這些IT程序猿了。
關於innerHTML和innerText兩個屬性的區別，我們用一個表格很能很清晰看出來了：
此外，除了innerHTML和innerText這2個屬性，還有outerHTML和outerText，但是後面那2個屬性用得比較少，在此不展開談論。如果感興趣的同學，可以自行度娘了解一下。