在 JavaScript 中向元素新增文字

1. 在 JavaS 中使用 appendChild 通過 DOM 將文字新增到現有文字元素
2. 在 JavaScript 中通過 DOM 使用 textContent 向現有的文字元素新增文字
3. 使用 innerText 通過 DOM 將文字新增到 JavaScript 中的現有文字元素

對於瀏覽器而言，修改 DOM 內容是最基本的任務。有時我們希望根據某些操作更改 DOM 文字，而無需重新渲染整個 DOM。在本文中，我們將學習如何通過 DOM 將文字新增到 JavaScript 中的現有文字元素。

在 JavaS 中使用 appendChild 通過 DOM 將文字新增到現有文字元素

DOM 包含節點列表。每個節點都包含自己的資料。JavaScript 允許將新節點例項新增到選定父節點內的現有子節點列表中。

語法：

appendChild(aChild);

appendChild() 函式採用新建立節點的輸入引數或必須新增到父節點的最常見元素。如果 appendChild() 引用現有節點，則將給定子節點從其當前位置移動到新位置。

它返回作為新增的子節點（子節點）的節點，除非子節點是 DocumentFragment。在這種情況下，將返回空 DocumentFragment。有關更多資訊，請閱讀 appendChild 方法的文件。

<p id="p">Hello </p>

<p id="p1">JavaScript Channel </p>

const text = document.createTextNode('Welcome to My channel');
const pNode = document.getElementById('p');
pNode.appendChild(text);

在上面的示例中，我們使用 document.createTextNode("Welcome to My channel") 建立了文字節點，然後將其附加到文件的 p 節點。上述程式碼的輸出將建立一個如下所示的 DOM。

輸出：

"Hello Welcome to My channel"

在 JavaScript 中通過 DOM 使用 textContent 向現有的文字元素新增文字

它是 Node 介面的屬性，表示所選節點及其後代的文字內容。JavaScript 允許將其他文字從所選父節點中的子節點新增到當前文字內容中。

語法：

textContent = data;

textContent 屬性更新選定節點的文字內容。使用者可以根據需要對文字資料進行修改，如拼接、更新等。如果節點為文件或文件型別，則 textContent 返回 null。textContent 返回其他節點型別的每個子節點的 textContent 的串聯，註釋和處理指令除外。當節點沒有子節點時，這是一個空字串。有關更多資訊，請閱讀 textContent 屬性的文件。

const pNode = document.getElementById('p');
pNode.textContent += 'Welcome to My channel';

在上面的示例中，我們使用 document.getElementById("p") 獲取段落節點，然後將 Welcome to my channel 新增到段落節點的現有文字內容中。上面程式碼的輸出更新了一個 DOM，如下所示：

輸出：

"Hello Welcome to My channel"

使用 innerText 通過 DOM 將文字新增到 JavaScript 中的現有文字元素

它屬於 HTMLElement。此屬性表示所選節點及其後代的呈現文字內容。JavaScript 允許將其他文字從所選父節點中的子節點新增到當前文字內容中。

語法：

const renderedText = htmlElement.innerText
htmlElement.innerText = string

innerText 屬性更新選定節點的文字內容。使用者可以根據需要更改文字資料，例如連線、更新等。更多資訊請參見 innerText 屬性的文件。

const pNode = document.getElementById('p');
pNode.innerText += 'Welcome to My channel';

在上面的示例中，我們使用 document.getElementById("p") 獲取段落節點，然後將 Welcome to my channel 新增到段落節點的現有文字內容中。上面程式碼的輸出更新了一個 DOM，如下所示：

輸出：

"Hello Welcome to My channel"

textContent 和 innerText 之間的唯一區別是 textContent 獲取所有元素的內容，包括 script 和 style 元素。相反，innerText 只顯示人類可讀的元素。textContent 返回節點的所有元素。相比之下，innerText 具有風格意識，不會從隱藏元素返回任何文字。原則上，innerText 識別文字的呈現外觀，但 textContent 不識別。