jQuery 與 JavaScript 比較 (3) - 存取元素HTML / 文字內容


如果要針對某個元素的內容文字進行存取,jQuery可以透過 html() 與 text() 兩個方法,例如以下的 div 元素:

<div id="msg"><span style="color:red;">jQuery vs. JavaScript</span></div>

如果要取出 div 元素中的 html 內容,jQuery需要以下的語法:

$('#msg').html() 

使用JavaScript 則需引用 innerHTML 屬性:

document.getElementById('msg').innerHTML

至於其中不包含標籤的「jQuery vs. JavaScript」純文字的擷取,jQuery需要的語法如下:

$('#msg').text()

而JavaScript 需引用 textContent屬性:

document.getElementById('msg').textContent

以下列舉輸出結果:

console.log($('#msg').html());
結果:<span style="color:red;">jQuery vs. JavaScript</span>
console.log($('#msg').text());
結果:jQuery vs. JavaScript
console.log(document.getElementById('msg').innerHTML);
結果:<span style="color:red;">jQuery vs. JavaScript</span>
console.log(document.getElementById('msg').textContent);
結果:jQuery vs. JavaScript

沒有留言: