首页 > 代码库 > js中的innerHTML、innerText、outerHTML的内容代码详解

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

2024-07-22 07:49:27   215人阅读

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

<!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=http://www.mamicode.com/‘#‘>test01";        //t1.innerHTML里边的a标签有html属性        t2.innerText = "<a href=http://www.mamicode.com/‘#‘>test02";        //t2.innerText里边的a标签会被当做普通文本对待        t2.outerHTML = "<div><a href=http://www.mamicode.com/‘#‘>outerHTML
"; //t2.outerHTML会将包括<div id="test02"></div>在内的内容都给替换掉 /*综上所述*/ /* 一：得到标签内部文本不含html标签：innerText 二：得到标签内部包含html在内的所有内容，但是不包含标签自己：innerHTML(记住四个HTML都是大写) 三：得到包含标签在内的所有html内容element.outerHTML; */ </script></body></html>
View Code

 

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


联系
我们