JS中的innerHTML和innerText

        今天在進行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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章