今天在進行DOM總結的時候遇到了innerHTML,由於在前幾天看到了小夥伴總結了一篇關於innerHTML和innerText的博客總結,於是自己也開始搜查資料做一個小小的總結。
1.innerHTML可獲取或設置指定dom元素標籤內的 html內容,從該元素標籤的起始位置到終止位置的全部內容(包含html標籤)。
獲取元素的內容:element.innerHTML;
給元素設置內容:element.innerHTML =htmlString;
2.innerText可獲取或設置指定元素標籤內的文本值,從該元素標籤的起始位置到終止位置的全部文本內容(不包含html標籤)。
獲取元素的內容:element.innerText;
給元素設置內容:element.innerText = string;
3.區別
innerHTML返回的是標籤內的 html內容,包含html標籤;
innerText返回的是標籤內的文本值,不包含html標籤;
實例:【獲取元素內容】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function getinnerHTML() {
alert( document.getElementById("test").innerHTML);
}
function getinnerText() {
alert( document.getElementById("test").innerText);
}
</script>
</head>
<body>
<p id="test"><font color="#000">獲取段落p的innerHTML</font></p>
<!--//給按鈕一個單機事件-->
<input type="button" onclick="getinnerHTML()" value="innerHTML" />
<input type="button" onclick="getinnerText()" value="innerText" />
</body>
</html>