如何在 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屬性將所需文字賦給這兩個元素。

  • 步驟 4 - 最後，我們使用append()或appendChild()方法將建立的元素附加到網頁，以便使用者可以看到。

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

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

因此，您瞭解了我們如何建立元素，但是建立元素並不能幫助使用者看到元素，因為它不是 DOM 的一部分，而是必須透過將它們附加到網頁來使其成為 DOM 的一部分。

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

示例

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

在下面的示例中，我們使用 document 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() 方法附加建立的元素。

在下面的示例中，我們使用 document 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 附加到父元素。

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

更新於：2022年8月23日

2K+ 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始
廣告
© . All rights reserved.