Heim > Artikel > Web-Frontend > Wie kann ich HTML mit JavaScript zurückgeben oder HTML erstellen?

Wie kann ich HTML mit JavaScript zurückgeben oder HTML erstellen?

王林nach vorne: 2023-09-10 21:25:061239Durchsuche

如何使用 JavaScript 返回 HTML 或构建 HTML？

Beim Erstellen von Webanwendungen müssen Sie häufig HTML auf der Clientseite dynamisch generieren. Dies kann mit JavaScript erfolgen, und es gibt verschiedene Möglichkeiten, dies zu tun. In diesem Artikel zeigen wir Ihnen, wie Sie HTML zurückgeben oder HTML mit JavaScript erstellen.

HTML von einer Funktion zurückgeben

Eine Möglichkeit, HTML dynamisch zu generieren, besteht darin, eine HTML-Zeichenfolge von einer Funktion zurückzugeben. Nehmen wir zum Beispiel an, wir haben eine Funktion, die Listenelemente generiert –

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

Dann können wir diese Funktion verwenden, um HTML zu generieren –

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

var list = '';
list += generateListItem('Item 1');
list += generateListItem('Item 2');
list += generateListItem('Item 3');
list += '';

console.log(list)

Die Listenvariable enthält jetzt den folgenden HTML-Code –

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

HTML mit DOM-Methoden erstellen

Dynamisch HTML generieren Eine andere Möglichkeit besteht darin, die DOM-Methode zum Erstellen der HTML-Struktur zu verwenden. Dies kann durch das Erstellen von Elementen und das anschließende Hinzufügen dieser zum DOM erfolgen. Nehmen wir zum Beispiel an, wir möchten eine Liste erstellen, die dieselben Elemente wie zuvor enthält –

var list = document.createElement(&#39;ul&#39;);

var item1 = document.createElement(&#39;li&#39;);
item1.innerText = &#39;Item 1&#39;;
list.appendChild(item1);

var item2 = document.createElement(&#39;li&#39;);
item2.innerText = &#39;Item 2&#39;;
list.appendChild(item2);

var item3 = document.createElement(&#39;li&#39;);
item3.innerText = &#39;Item 3&#39;;
list.appendChild(item3);

Die Listenvariable enthält jetzt den folgenden HTML-Code:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Beispiel

Im folgenden Beispiel verwenden wir verschiedene DOM-Methoden, um einen HTML-Code zu erstellen Liste.

<!DOCTYPE html>
<html>
<body>
   <h2> Building HML using DOM methods</h2>
   <div id="parent">
      <p> We create a list by generating HTML elements</p>
      <h4 id="child">Tutorials List</h4>
   </div>
   <div id="result"></div>

   <script>
      var list = document.createElement(&#39;ul&#39;);
      var item1 = document.createElement(&#39;li&#39;);
      item1.innerText = &#39;JavaScript&#39;;
      list.appendChild(item1);

      var item2 = document.createElement(&#39;li&#39;);
      item2.innerText = &#39;Python&#39;;
      list.appendChild(item2);

      var item3 = document.createElement(&#39;li&#39;);
      item3.innerText = &#39;Rupy&#39;;
      list.appendChild(item3);
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

Im obigen Programm verwenden wir die Methode createElement, um ungeordnete Listen und Listenelemente zu erstellen. Die appendChild-Methode wird verwendet, um Listenelemente zur Liste hinzuzufügen.

HTML mit innerHTML erstellen

Eine andere Möglichkeit, HTML zu erstellen, ist die Verwendung des innerHTML-Attributs. Dies kann durch Erstellen eines Elements und anschließendes Festlegen seiner innerHTML-Eigenschaft auf einen HTML-String erfolgen. Nehmen wir zum Beispiel an, wir möchten eine Liste erstellen, die dieselben Elemente wie zuvor enthält –

var list = document.createElement(&#39;ul&#39;);
list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;

Die Listenvariable enthält jetzt den folgenden HTML-Code:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Beispiel

Im folgenden Beispiel erstellen wir eine HTML-Liste, indem wir die zuweisen list zu innerHTML .

<!DOCTYPE html>
<html>
<body>
   <div id="result"> List </div>
   <script>
      var list = document.createElement(&#39;ul&#39;);
      list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

Im obigen Programm erstellen wir eine Liste mit der Methode createElement. Verwenden Sie innerHTML, um Listenelemente zu einer Liste hinzuzufügen. Um die Liste anzuzeigen, hängen wir das Element mit id = „result“ mithilfe der Methode appendChild an.

Fazit

In diesem Tutorial haben wir gezeigt, wie man HTML zurückgibt oder HTML mit JavaScript erstellt. Es gibt verschiedene Möglichkeiten, dies zu tun, und die Methode, die Sie wählen, hängt von Ihren Bedürfnissen ab.

Das obige ist der detaillierte Inhalt vonWie kann ich HTML mit JavaScript zurückgeben oder HTML erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 字符串 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 zeige ich den Fortschrittsbalken in ReactNative an?Nächster Artikel：Wie zeige ich den Fortschrittsbalken in ReactNative an?

In Verbindung stehende Artikel

Mehr sehen