用 DOM 改變元素內容

1月 18 2022 JavaScript

懶人包。

元素中的所有文字 innerText

存取文字內容

備註：只會顯示文字，不包含「標籤」

HTML：

1
2
3
4
 <div class="block">
  yoyoyo
  <span>I am a span</span>
</div>

JavaScript：

1
2
const element = document.querySelector('.block') // <div class="block">...</div>
console.log(element.innerText)  // yoyoyo I am a span

修改文字內容

備註：如果內容有「標籤」的話會被覆寫掉

innerText-01

1
2
3
4
 <div class="block">
  yoyoyo
  <span>I am a span</span>
</div>

JavaScript：

1
2
const element = document.querySelector('.block')
element.innerText = 'blablablabla'

Output：

innerText-02

元素中的所有內容 innerHTML

備註：所有內容指的就是包含「標籤」

存取內容

HTML：

1
2
3
4
 <div class="block">
  yoyoyo
  <span>I am a span</span>
</div>

JavaScript：

1
2
const element = document.querySelector('.block')
console.log(element.innerHTML)

Output：

1
2
yoyoyo
<span>I am a span</span>

修改內容

HTML：

1
2
3
4
 <div class="block">
  yoyoyo
  <span>I am a span</span>
</div>

JavaScript：

1
2
3
4
5
const element = document.querySelector('.block')
element.innerHTML = `
  <span>hehehe</span>
  <a href="#">link</a>
`

Output：

1
2
3
4
<div class="block">
  <span>hehehe</span>
  <a href="#">link</a>
</div>

包含元素自己的所有內容 outerHTML

備註：就跟 inner 一樣，只是現在還包含「元素自己」

存取內容

HTML：

1
2
3
4
<div class="block">
  yoyoyo
  <span>I am a span</span>
</div>

JavaScript：

1
2
const element = document.querySelector('.block')
console.log(element.outerHTML)

Output：

1
2
3
4
<div class="block">
  yoyoyo
  <span>I am a span</span>
</div>

修改內容

備註：要修改的元素上層必須有「父元素」才可以，下面能改是因為在測試環境裡面 <div> 的上層有 <body>。

HTML：

1
2
3
4
 <div class="block">
  yoyoyo
  <span>I am a span</span>
</div>

JavaScript：

1
2
3
4
5
const element = document.querySelector('.block')
element.outerHTML = `
  <span>hehehe</span>
  <a href="#">link</a>
`

Output：

1
2
<span>hehehe</span>
<a href="#">link</a>

比 innerHTML 效能更好但比較難懂的 insertAdjacentHTML

注意一下第一個參數有四個選項：

  • beforebegin 元素的之前（之前的之前）
  • aftereend 元素的之後（之後的之後）
  • afterbegin 元素裡面的第一個
  • beforeend 元素裡面的最後一個

（其實英文意思比較好懂）

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="beforebegin">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<ul class="afterbegin">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
1
2
3
4
5
6
7
8
9
10
// 在選到的元素前面插入 <div>
document
  .querySelector('.beforebegin')
  .insertAdjacentHTML('beforebegin', '<div>Insert to outside</div>')


// 在選到的元素（裡面）的第一個插入 <li>
document
  .querySelector('.afterbegin')
  .insertAdjacentHTML('afterbegin', '<li>Insert to inside</li>')

insertAdjacentHTML

用 DOM 插入或刪除元素 用 DOM 改變元素的 Class
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×