jQuery DOM 操控術 - 插入到 DOM 中

在元素中插入新內容。

text()

讀取

讀取指定元素中的文字內容。

text()

範例

HTML

<div id="Dom">
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
</div>

JavaScript

const str = $('#Dom').text();

/*
  List Item 1
  List Item 2
  List Item 3
  List Item 4
  List Item 5
*/
console.log(str);

設定

在指定的元素中插入文字內容。

text(text)

參數

功能	說明	型別	範例	備註
text	文字內容	String	'Hello jQuery'	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').text('Hello jQuery');

html()

讀取

讀取指定元素中的 HTML 內容。

html()

範例

HTML

<div id="Dom">
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
</div>

JavaScript

const code = $('#Dom').html();

/*
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
*/
console.log(code);

設定

在指定的元素中插入 HTML 內容。

html(htmlString)

參數

功能	說明	型別	範例	備註
htmlString	HTML 內容	String	'<h1>Hello jQurey</h1>'	必填

範例

HTML

<div id="Dom">DOM<div>

JavaScript

$('#Dom').html('<h1>Hello jQurey</h1>');