100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JavaScript文档对象模型document对象改变Html元素内容(3)

JavaScript文档对象模型document对象改变Html元素内容(3)

时间:2020-02-05 09:07:04

相关推荐

JavaScript文档对象模型document对象改变Html元素内容(3)

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。