JS獲取標簽內容的方法
測試代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="box"> <p>這有個 第一個p</p> <p>這有個第二個p</p> <span>這是個 span</span> <br> <a href="#">這有個a標簽</a> </div> </body> </html>
1.innerHTML
此方法可獲取標簽中的所有的內容，包括標簽、空格、文本、換行等。
想要清空標簽的內容，innerHTML = ""；即可
如果想要設置標簽中的內容，innerHTML = "填寫想要設置的標簽和內容"；設置內容時，會把原有的內容全部覆蓋。
JS代碼和效果圖如下：
<script> var box = document.getElementById('box'); // 獲取標簽的內容 var box1 = box.innerHTML; var box2 = document.getElementById('box').innerHTML; console.log(box1); </script>
<script> //替換標簽內容 var box = document.getElementById('box'); box.innerHTML = '<h3>你們被我h3替換啦！！！</h3>'; console.log(box); </script>
2.innerText
此方法獲取標簽(及其子標簽)中的所有文本，不會獲取標簽（或者說可以過濾掉所有的標簽）。如果有多個空格或者是換行，解析為一個空格。
如果想要清空標簽的內容，innerText = ""；即可
如果想要設置標簽中的內容，innerText = "填寫想要設置的標簽和內容"；設置內容時，會把原有的內容全部覆蓋。但是標簽不會被解析，會直接以文本的形式打印在頁面中。
<script> //獲取標簽機器子標簽的所有文本內容 var box = document.getElementById('box'); var box2 = box.innerText; console.log(box2); </script>
<script> //修改標簽文本內容，內容中包含的標簽不會被解析，會文本輸出 var box = document.getElementById('box'); box.innerText = '<p>這里有個p，來看一下</p>' </script>
3.texContent
textContent來獲取標簽中的內容。但是textContent在過濾掉標簽時，會保留標簽結構。
innerText兼容性問題處理JS代碼：
<script> // 處理innerText的瀏覽器兼容性問題 function getInnerText(element) { if (typeof element.innerText === 'string') { return element.innerText; } else { return element.textContent; } } </script>