如何在 JavaScript 中從字串建立元素？-js教程-PHP中文網

首頁

web前端

js教程

如何在 JavaScript 中從字串建立元素？

王林

Aug 27, 2023 pm 06:21 PM

如何在 JavaScript 中从字符串创建元素？

在本教程中，我們將了解在 JavaScript 中從字串建立元素的各種方法。如果我們必須動態生成元素以使網站具有互動性，從字串創建元素可能非常有用。一個例子就像在待辦事項清單應用程式中我們新增、刪除和編輯待辦事項。

createElement() 方法

我們使用 createElement() 方法建立 JavaScript 項目。要建立特定元素，我們將專案名稱作為字串傳遞到 createElement() 方法中。

createElement(tagName) 函數有一個參數作為將使用此方法建立的標記的名稱。這裡tagName是參數名稱，它將採用字串形式。請注意，只會從一個字串建立一個元素。

文法

document.createElement("tagName")

在tagName 的位置，我們傳遞標籤名稱，例如p（段落）、h1（標題1）、img （圖片）。 createElement 將使 tagName 小寫，這樣您就不必擔心大小寫。

步驟

第 1 步 - 使用 h3 和 p 等元素值建立字串
#第 2 步 - 將字串作為參數傳遞給 createElement() 方法。將值分配給變數。這將創建我們所需的元素。
第 3 步 - 建立元素後，我們使用 innerText 屬性將所需的文字指派給兩個元素。
STEP 4 - 畢竟，追加我們使用append()或appendChild()方法將建立的元素追加到網頁，以便它對網頁可見用戶。

讓我們從字串建立一個標題和一個段落。

let string1="h3"
let string2="p"
let element1=document.createElement(string1)
let element2=document.createElement(string2)

因此，您必須了解我們如何創建元素，但創建元素無助於向用戶顯示該元素，因為它不是DOM 的一部分，相反，我們必須通過將其附加到網頁來使其成為DOM 的一部分.

因此，我們使用一些方法，例如append()和appendChild()。

範例

使用append()方法追加建立的元素。

在下面的範例中，我們使用文件 createElement() 方法建立了兩個元素 h3 和 p。然後為這些元素分配一些文本，並使用append()方法將元素附加到DOM。最後，使用 innerHTML 屬性顯示元素。

<html>
<head>
   <title>Creating elements from string in JavaScriptnhi</title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.append(element1)
      document.body.append(element2)
   </script>
</body>
</html>

範例

使用appendChild()方法追加建立的元素。

在下面的範例中，我們使用文件 createElement() 方法建立了兩個元素 h3 和 p。然後為這些元素分配一些文本，並使用 appendChild() 方法將元素附加到 DOM。最後，使用 innerHTML 屬性顯示元素

<html>
<head>
   <title>Creating elements from string in JavaScript </title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.appendChild(element1)
      document.body.appendChild(element2)
   </script>
</body>
</html>

現在您可能會想，上面的程式的輸出是相同的，那麼是什麼讓兩個程式不同呢？

嗯，是的，兩者都用於將節點附加到HTML 文檔，但在情況下，append() 方法會返回附加的節點，但appendChildI() 方法不會返回任何內容。

使用append()方法我們可以一次追加多個元素，但在appendChild()方法中我們只能一次追加一個元素。

喜歡

document.body.append(element1, element2)

這將完成與

相同的工作

document.body.append(element1)
document.body.append(element2)

使用append()方法DOMString和DOMNodes都可以追加到父元素，但在這種情況下僅appendChild()方法 DOMNodes 可以附加到父元素。

所以，這些是我們可以從字串建立元素的一些方法。

以上是如何在 JavaScript 中從字串建立元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。