主題

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

冰抹茶拿鐵 | 2022-08-12 05:20:15 | 巴幣 0 | 人氣 293

(本文同步發表於 iT 邦幫忙 )

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

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

如果今天想用 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)

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

insertAdjacentElement

element.insertAdjacentElement(position, element)

var container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.insertAdjacentElement("beforeend",button);

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

appendChild

element.appendChild(aChild)

var container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.appendChild(button);

insertBefore

parentNode.insertBefore(newNode, referenceNode)

vavar container = document.querySelector(".container");
const button = document.createElement("button");
button.innerText = "點我"; //修改標籤的文字內容
container.insertBefore(button,undefined); //container 沒有其他 child node

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