iT邦幫忙

1

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

  • 分享至 

  • xImage
  •  

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

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

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

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

1. 想修改文字內容

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

innerText

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

textContent

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

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

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

2. 想插入子標籤

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

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

innerHtml

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 標籤

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
var container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.insertAdjacentElement("beforeend",button);

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

appendChild

element.appendChild(aChild)

  • aChild : 要添加到父節點(element)的子節點列表末端的子節點,簡單說就是插在其他子節點的最後面
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就可以囉!
var container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.insertBefore(button,undefined); //container 沒有其他 child node

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

小結

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

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


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言