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>