1.document对象改变Html元素内容
(1.)innerText不会自动解析html标签,会将代码前后的空格和换行去掉
innerHTMl会自动解析html标签,保留代码前后的空格和换行 (推荐使用这个)
这两个属性都可以改变html元素内容,会将标签原有的元素内容覆盖,而不是追加元素内容
(2.)除此之外innerText和InnerHtml两个属性不仅可以改变Html元素内容,还可以获取Html元素内容
案例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="one">111</div>
<div class="two">222</div> <!-- innerText和innerHtml会覆盖html元素内容,而不是追加元素内容 -->
<p>
12312
<span>2222</span>
<a href="#">1</a>
</p>
<script>
var obj1 = document.querySelector('.one'); //获取类名为one的第一个元素对象
var obj2 = document.querySelector('.two'); //获取类名为two的第一个元素对象
var obj3 = document.querySelector('p');//获取标签为p的第一个元素对象
obj1.innerText = '<h2>123</h2>'; //innerText不会自动解析html标签
obj2.innerHTML = '<h2>123</h2>'; //innerHTMl会自动解析html标签
//使用innerText和innerHtml获取Html元素内容
console.log(obj3.innerText);
console.log(obj3.innerHTML);
</script>
</body>
</html>