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