技術類文章

修改 HTML 標籤文字? 插入 HTML 子標籤?

以下分享幾種常見修改HTML標籤內容的方式，依照不同需求，我把自己會的修改方式分成兩大類，分別是針對標籤修改內部文字和在標籤內插入子標籤兩大類。

假設我們現在的 HTML 標籤像下面這樣 :

1
<div class="container"></div>

如果今天想用 JavaScript 修改標籤內容，我們可以怎麼做呢?

1. 想修改文字內容

適合只是想修改標籤內的文字。

innerText

1
2
var container = document.querySelector('.container');
container.innerText = "成功修改內容啦!";

textContent

1
2
var container = document.querySelector('.container');
container.textContent = "成功修改內容啦!";

上面的兩種方法都可以成功修改標籤內的文字，效果皆同下圖。

ps. 下面的 innerHTML 雖然也可以用來修改文字，但就有點大材小用的感覺。

2. 想插入子標籤

適合想在標籤內完成更多複雜的事。
(像是建立 Click Event Listener，讓按鈕彈出來。)

在div標籤內試著加上button標籤看看吧!

innerHtml

1
2
var container = document.querySelector(".container");
container.innerHTML = "<button>點我</button>";

insertAdjacentHTML

element.insertAdjacentHTML(position,text)

  • position : 指定要將 text 插到 Element 的哪裡

    • beforebegin : 插在 element 前面
    • afterbegin : 插在 element 裡面的最前
    • beforeend : 插在 element 裡面的最後
    • afterend : 插在 element 後面


    (圖片出自: MDN)

  • text : 要放的字串，可以帶有 HTML 標籤

1
2
var container = document.querySelector(".container");
container.insertAdjacentHTML("beforeend","<button>點我</button>");

insertAdjacentElement

element.insertAdjacentElement(position, element)

  • position : 同 insertAdjacentHTML
  • element : 要插入的 HTML element，這裡不能像上面單純放<button>點我</button>字串，而必須明確使用createElement("button")來建立要插入的 element
1
2
3
4
var container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.insertAdjacentElement("beforeend",button);

下面2種方法也都不能單純傳入含 HTML 標籤的字串喔!

appendChild

element.appendChild(aChild)

  • aChild : 要添加到父節點(element)的子節點列表末端的子節點，簡單說就是插在其他子節點的最後面
1
2
3
4
var container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.appendChild(button);

insertBefore

parentNode.insertBefore(newNode, referenceNode)

  • parentNode : 要被插入的父節點
  • newNode : 要插入的新子節點
  • referenceNode : newNode 會插在 referenceNode 前面，沒有 referenceNode 也沒關係，放入undefined就可以囉!
1
2
3
4
var container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.insertBefore(button,undefined); //container 沒有其他 child node

上面的 5 種方法都可以得到一樣的結果如下 :

小結

上面介紹修改標籤文字的2種方法和在標籤內插入子標籤的5種方法，不論採用何種方法，在視窗畫面都可以呈現相同的效果，但是每種方法背後的原理都有細部的差異(包含優缺點或風險…)，有興趣的話可以自行去深入研究看看。

歡迎分享更多你所知道修改標籤文字和插入子標籤的方法。

分享到