js中的innerHTML、innerText、outerHTML的内容代码详解

浏览数：46 / 时间：2015年06月09日

我还是喜欢看代码，看吧……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML innerText outerHTML的练习</title>
    <style>
        div{
            margin:20px auto;
            width:200px;
            height:200px;
            background-color: pink;
        }
        #test02{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="test01"></div>
    <div id="test02">sfda</div>
    <script>
        var t1 = document.getElementById("test01");
        var t2 = document.getElementById("test02");
        t1.innerHTML = "<a href=‘#‘>test01</a>";
        //t1.innerHTML里边的a标签有html属性
        t2.innerText = "<a href=‘#‘>test02</a>";
        //t2.innerText里边的a标签会被当做普通文本对待
        t2.outerHTML = "<div><a href=‘#‘>outerHTML</a></div>";
        //t2.outerHTML会将包括<div id="test02"></div>在内的内容都给替换掉

        /*综上所述*/
        /*
            一：得到标签内部文本不含html标签：innerText
            二：得到标签内部包含html在内的所有内容，但是不包含标签自己：innerHTML(记住四个HTML都是大写)
            三：得到包含标签在内的所有html内容element.outerHTML;
        */
    </script>
</body>
</html>
View Code

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 src html com log http js class style 代码 src html com log http js

相关文章

随机文章

您可能还喜欢

您可能还喜欢