首頁 > 文章 > web前端 > 如何在 JavaScript 中從字串建立元素？

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

王林轉載: 2023-08-27 18:21:031565瀏覽

如何在 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中文網其他相關文章！

JavaScript html 字符串 append dom innerHTML

陳述：

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

上一篇：如何解決JavaScript堆疊記憶體不足的問題，以獲得質數？下一篇：如何解決JavaScript堆疊記憶體不足的問題，以獲得質數？

看更多