亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js中textContent、innerText和innerHTML的用法以及區(qū)別

 更新時間:2023年05月15日 23:40:21   作者:碼仙  
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下

一.textContent的用法

1.設(shè)置標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").textContent = "改變了";
    };
</script>
</body>

2.獲取標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    document.getElementById("btn").onclick = function () {
        var text = document.getElementById("dv").textContent;
        console.log(text);
    };
</script>
</body>

二.innerText的用法

1.設(shè)置標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerText = "改變了";
    };
</script>
</body>

2.獲取標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    document.getElementById("btn").onclick = function () {
        var text = document.getElementById("dv").innerText;
        console.log(text);
    };
</script>
</body>

三.innerHTML的用法 1.設(shè)置標(biāo)簽中的文本內(nèi)容

1.設(shè)置標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("dv").innerHTML = "改變了";
    };
</script>
</body>

 

2.獲取標(biāo)簽中的文本內(nèi)容

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    document.getElementById("btn").onclick = function () {
        var text = document.getElementById("dv").innerHTML;
        console.log(text);
    };
</script>
</body>

四.innerText和textContent的區(qū)別

  • 設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用textContent屬性,谷歌,火狐支持,IE8不支持
  • 設(shè)置標(biāo)簽中的文本內(nèi)容,應(yīng)該使用innerText屬性,谷歌,火狐,IE8都支持
  • 如果這個屬性在瀏覽器中不支持,那么這個屬性的類型是undefined
  • 判斷這個屬性的類型 是不是undefined,就知道瀏覽器是否支持

1.兼容代碼設(shè)置任意的標(biāo)簽中間的任意文本內(nèi)容

<script>
    function setInnerText(element, text) {
        //判斷瀏覽器是否支持這個屬性
        if (typeof element.textContent == "undefined") {//不支持
            element.innerText = text;
        } else {//支持這個屬性
            element.textContent = text;
        }
    };
</script>

2.兼容代碼獲取任意標(biāo)簽中間的文本內(nèi)容

<script>
    function getInnerText(element) {
        if (typeof element.textContent == "undefined") {
            return element.innerText;
        } else {
            return element.textContent;
        }
    };
</script>

五.textContent、innerText和innerHTML的區(qū)別

textContent、innerText的效果是一樣的,所以這里我只用innerText舉例

1.設(shè)置標(biāo)簽中的文本內(nèi)容

innerText的效果

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerText = "哈哈";//設(shè)置文本
        my$("dv").innerText = "<p>這是一個p</p>";//設(shè)置html標(biāo)簽的代碼
    };
</script>
</body>

innerHTML的效果

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">這是一個div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerHTML = "哈哈";
        my$("dv").innerHTML = "<p>這是一個p</p>";//設(shè)置Html標(biāo)簽的
    };
</script>
</body>

2.獲取標(biāo)簽中的文本內(nèi)容 

innerText的效果

<body>
<input type="button" value="按鈕" id="btn">
<div id="dv">
    <p>這是一個p</p>
</div>
<script>
    document.getElementById("btn").onclick = function () {
        //可以獲取標(biāo)簽中的文本內(nèi)容
        console.log(document.getElementById("dv").innerText);
    };
</script>
</body>

innerHTML的效果

3.總結(jié)

  • 如果使用innerText主要是設(shè)置文本的,設(shè)置標(biāo)簽內(nèi)容,是沒有標(biāo)簽的效果的
  • innerHTML是可以設(shè)置文本內(nèi)容
  • innerHTML主要的作用是在標(biāo)簽中設(shè)置新的html標(biāo)簽內(nèi)容,是有標(biāo)簽效果的
  • 想要設(shè)置標(biāo)簽內(nèi)容,使用innerHTML,想要設(shè)置文本內(nèi)容,innerText或者textContent,或者innerHTML,推薦用innerHTML
  • innerText可以獲取標(biāo)簽中間的文本內(nèi)容,但是標(biāo)簽中如果還有標(biāo)簽,那么最里面的標(biāo)簽的文本內(nèi)容也能獲取.---獲取不到標(biāo)簽的,文本可以獲取
  • innerHTML才是真正的獲取標(biāo)簽中間的所有內(nèi)容

本篇博客來自于傳智播客視頻教程的總結(jié)以及筆記的整理,僅供學(xué)習(xí)交流,切勿用于商業(yè)用途

相關(guān)文章

  • 20個必會的JavaScript面試題(小結(jié))

    20個必會的JavaScript面試題(小結(jié))

    這篇文章主要介紹了20個必會的JavaScript面試題(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-07-07
  • JS實現(xiàn)Date日期格式的本地化的方法小結(jié)

    JS實現(xiàn)Date日期格式的本地化的方法小結(jié)

    為了更好的更新多語言日期的顯示,所以希望實現(xiàn)日期的本地化格式顯示要求,常規(guī)的特殊字符型格式化無法滿足顯示要求,這里整理了幾種我思考實現(xiàn)的本地化實現(xiàn)功能
    2024-06-06
  • 最新評論