common.js代码
function my$(id) {
return document.getElementById(id);
}
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 120px;
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<input type="button" value="显示效果获取" id="btn2">
<div id="dv">
这是div
<p>这是一个p</p>
</div>
哈哈哈
<script src="common.js"></script>
<script>
/*总结：
如果使用innerText主要设置文本的，设置标签内容，是没有标签效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容，是有标签效果的
想要设置标签内容，使用innerHTML
想要设置文本内容，innerText或者textContent·、innerHTML（推荐）
* */
/*获取的时候：
innerText可以获取标签总结的文本内容，但是标签中如果还有标签，
那么最里面的标签文本内容也能获取---获取不到标签，但是文本可以获取
innerHTML才是真正的获取标签中间的所有内容
* */
//设置
my$("btn").οnclick= function () {
// my$("dv").innerText="哈哈";//设置文本
// my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码，连,<p></p>一起输出
// my$("dv").innerHTML="哈哈";
// my$("dv").innerHTML="<p>这是一个p</p>";//设置html标签的代码,不输出p标签
};
my$("btn2").οnclick=function () {
//console.log(my$("dv").innerText);
console.log(my$("dv").innerHTML);
};
/*结论：
如果想要（获取标签及内容，使用innerHTML）
如果想要设置标签，使用innerh
仅仅想要设置文本，用innerText、innerHTML、textContent
* */
</script>
</body>
</html>
2171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
