本文摘自PHP中文网,作者逆旅行人,侵删。
在JavaScript
中获取元素只是第一步,如何对元素的属性进行更改才是接下里的重要步骤,本文主要讲述了如何在JS
中更改DOM
元素的内容。
HTML表单内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
</ head >
< body >
< div class = "box" >
< p ></ p >
</ div >
</ body >
</ html >
|
1.textContent:
1 2 3 4 5 6 7 8 9 | <script>
const box=document.querySelector( ".box" );
console.log(box);
const p=document.querySelector( 'p' );
console.log(p);
p.textContent = "hello world" ;
</script>
|
2.innerText:
1 2 3 4 5 6 7 8 | <script>
const box=document.querySelector( ".box" );
console.log(box);
const p=document.querySelector( 'p' );
console.log(p);
p.innerText = "php.cn" ;
</script>
|
3.innerHTML:
1 2 3 4 5 6 7 8 | <script>
const box=document.querySelector( ".box" );
console.log(box);
const p=document.querySelector( 'p' );
console.log(p);
p.innerHTML= '<em style="color:red">php.cn</em>' ;
</script>
|
推荐:《2021年js面试题及答案(大汇总)》
以上就是如何在JS中改变DOM元素的文本内容的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
storage event如何实现页面间通信
javascript中generator函数的详理解
javascript怎么实现页面关闭
深入理解javascript的并发模型和事件循环机制
vue.js中v-html渲染的dom添加scoped的样式的方法介绍
不属于javascript的数据类型是什么
electron页内查找模块介绍(代码示例)
javascript如何去除html标签
详解使用 set 来提高js代码性能的方法
原来es6 module还可以这样用!(备忘单)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何在JS中改变DOM元素的文本内容