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

以下分享几种常见修改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 : 同 insertAdjacentHTMLelement : 要插入的 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种方法，不论採用何种方法，在视窗画面都可以呈现相同的效果，但是每种方法背后的原理都有细部的差异(包含优缺点或风险..)，有兴趣的话可以自行去深入研究看看。

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