Heim > Artikel > Web-Frontend > Wie erstelle ich ein Element aus einer Zeichenfolge in JavaScript?

Wie erstelle ich ein Element aus einer Zeichenfolge in JavaScript?

王林nach vorne: 2023-08-27 18:21:031619Durchsuche

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

In diesem Tutorial werden wir uns verschiedene Möglichkeiten ansehen, Elemente aus Strings in JavaScript zu erstellen. Das Erstellen von Elementen aus Strings kann sehr nützlich sein, wenn wir Elemente dynamisch generieren müssen, um die Website interaktiv zu gestalten. Ein Beispiel ist die To-do-Listen-App, in der wir To-do-Elemente hinzufügen, löschen und bearbeiten.

createElement()-Methode

Wir erstellen JavaScript-Elemente mit der Methode createElement(). Um ein bestimmtes Element zu erstellen, übergeben wir den Elementnamen als String an die Methode createElement().

Die Funktion

createElement(tagName) hat einen Parameter als Namen des Tags, das mit dieser Methode erstellt wird. Hier ist tagName der Parametername und wird in Zeichenfolgenform vorliegen. Beachten Sie, dass aus einer Zeichenfolge nur ein Element erstellt wird.

Grammatik

document.createElement("tagName")

An der Stelle von tagName übergeben wir den Tag-Namen wie p (Absatz), h1 (Überschrift 1), img (Bild). createElement macht tagName in Kleinbuchstaben, sodass Sie sich keine Gedanken über die Groß- und Kleinschreibung machen müssen.

Schritte

Schritt 1 – Erstellen Sie eine Zeichenfolge mit Elementwerten wie h3 und p
Schritt 2 – Übergeben Sie die Zeichenfolge als Parameter an die Methode createElement(). Weisen Sie einer Variablen einen Wert zu. Dadurch werden die Elemente erstellt, die wir benötigen.
Schritt 3 - Nach dem Erstellen der Elemente weisen wir beiden Elementen mithilfe des Attributs innerText den erforderlichen Text zu.
SCHRITT 4 – Schließlich verwenden wir beim Anhängen die Methode append() oder appendChild(), um das erstellte Element an die Webseite anzuhängen, sodass es für den Webbenutzer sichtbar ist.

Lassen Sie uns einen Titel und einen Absatz aus Zeichenfolgen erstellen.

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

Sie müssen also verstehen, wie wir ein Element erstellen, aber das Erstellen eines Elements hilft nicht dabei, dieses Element dem Benutzer anzuzeigen, da es nicht Teil des DOM ist, sondern wir müssen es zu einem Teil des DOM machen, indem wir es anhängen die Webseite

Also verwenden wir einige Methoden wie append() und appendChild().

Beispiel

Verwenden Sie die Methode append(), um das erstellte Element anzuhängen.

Im folgenden Beispiel haben wir zwei Elemente h3 und p mit der document-Methode createElement() erstellt. Weisen Sie diesen Elementen dann Text zu und verwenden Sie die Methode append(), um die Elemente an das DOM anzuhängen. Zum Schluss zeigen Sie das Element mit dem Attribut innerHTML an.

<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>

Beispiel

Fügen Sie das erstellte Element mit der Methode appendChild() hinzu.

Im folgenden Beispiel erstellen wir zwei Elemente h3 und p mit der Methode createElement() des Dokuments. Weisen Sie diesen Elementen dann etwas Text zu und verwenden Sie die Methode appendChild(), um die Elemente an das DOM anzuhängen. Verwenden Sie abschließend das Attribut „innerHTML“, um das Element anzuzeigen

<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>

Jetzt denken Sie vielleicht, dass die Ausgabe des oben genannten Programms dieselbe ist. Was unterscheidet die beiden Programme also?

Nun ja, beide werden zum Anhängen von Knoten an ein HTML-Dokument verwendet, aber in diesem Fall gibt die Methode append() den angehängten Knoten zurück, die Methode

appendChildI()

jedoch nichts.

Mit der Methode append()

können wir mehrere Elemente gleichzeitig anhängen, aber mit der Methode

appendChild() können wir jeweils nur ein Element anhängen. Gefällt mir

document.body.append(element1, element2)

Dies wird die gleiche Aufgabe erfüllen wie

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

Mit der

append()

-Methode können sowohl

DOMString als auch DOMNodes an das übergeordnete Element angehängt werden, in diesem Fall kann jedoch nur die appendChild()-Methode DOMNodes an das übergeordnete Element angehängt werden. Das sind also einige Möglichkeiten, wie wir Elemente aus Strings erstellen können.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Element aus einer Zeichenfolge in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 字符串 append dom innerHTML

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie löse ich das JavaScript-Heap-Out-of-Memory-Problem, um Primzahlen zu finden?Nächster Artikel：Wie löse ich das JavaScript-Heap-Out-of-Memory-Problem, um Primzahlen zu finden?

In Verbindung stehende Artikel

Mehr sehen