Rumah >hujung hadapan web >tutorial js >如何在JS中改变DOM元素的文本内容
在JavaScript
中获取元素只是第一步,如何对元素的属性进行更改才是接下里的重要步骤,本文主要讲述了如何在JS
中更改DOM
元素的内容。
HTML表单内容:
<!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:
<script> const box=document.querySelector(".box"); console.log(box); const p=document.querySelector('p'); console.log(p); //textContent:添加文本 p.textContent ="hello world"; </script>
2.innerText:
<script> const box=document.querySelector(".box"); console.log(box); const p=document.querySelector('p'); console.log(p); p.innerText ="php.cn"; </script>
3.innerHTML:
<script> const box=document.querySelector(".box"); console.log(box); const p=document.querySelector('p'); console.log(p); //将html字符串渲染出来应该使用innerHTML p.innerHTML='<em style="color:red">php.cn</em>'; </script>
推荐:《2021年js面试题及答案(大汇总)》
Atas ialah kandungan terperinci 如何在JS中改变DOM元素的文本内容. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!