前端筆記44——獲取或者修改div內容
阿新 • • 發佈：2019-01-05
前言
在日常的開發中，我們會需要獲取或者修改html元素內容。那麼有什麼方法可以完成我們的需求呢？下面分享我學習到的方法。
程式碼例項
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box"><span>hello world!!!</span></div> <button id="btn">點選按鈕</button> <script type="text/javascript"> // 需求：獲取到id為box的div裡面的內容 // 1.找到這個div 2.找到被點選的按鈕 3.點選事件必須和btn繫結 var oBox = document.getElementById('box') var oBtn = document.getElementById('btn') // 物件.onclick = 事件處理函式 function fn(){ // 獲取彈出box裡面的內容 // var content = oBox.innerHTML // alert(content) // 設定內容 oBox.innerHTML = '<span>html改變內容</span>' oBox.innerText = 'html改變內容' // 獲取或者設定純文字內容 alert(oBox.innerText) // 可以帶html標籤 alert(oBox.innerHTML) } oBtn.onclick = fn </script> </body> </html>
上面的程式碼中var content = oBox.innerHTML是獲取html裡面的內容。設定html中的元素內容有innerHTML和innerText和兩種方法。
innerHTML和innerText的區別
innerHTML能是被內容裡面的html標籤；innerText只能設定純文字內容。