Das Schreiben von HTML -Code ist einfach, aber wenn es um dynamische Änderungen gegenüber den Seiten wie dem Anhang von HTML geht, müssen Sie ungewöhnliche Strategien anwenden. JavaScript ist eine mächtige Sprache, um solche Jobs zu erledigen. Sie können JavaScript problemlos verwenden, um den HTML -Code in die Vorlage zu setzen. Wir werden dies in diesem Artikel besprechen.

Durch JavaScript gibt es zwei Möglichkeiten, HTML -Code an ein DIV -Tag anzuhängen.

• Verwenden von Innerhtml -Eigenschaft
• Einfügen von benachbarten HTML mit der Funktion InsertAdjacentHtml ()

Verwenden von Innerhtml -Attribut

Um die Innerhtml -Eigenschaft zu verwenden, um Code an ein Element (DIV) anzuhängen, wählen Sie zuerst das Element (DIV) aus, in dem Sie den Code anhängen möchten. Fügen Sie dann mit dem += Operator bei Innerhtml den als Zeichenfolgen eingewickelten Code hinzu.

Hier ist die Syntax des Attributs.

Htmlelement.Innerhtml += "Fügen Sie Ihren Code hier ein" ein. "

Nehmen wir ein Beispiel dafür. Zunächst werden wir uns auf das HTML -Element beziehen, indem wir die Eigenschaft verwenden:

dokumentieren.GetElementById ();

Lassen Sie uns daher eine erstellen <div> und setzen a <H1> Tag und a <Taste> im Inneren.

Dies ist ein LinuxHint -Tutorial

Absatz anhängen

Wie Sie sehen können, haben wir dem eine ID des „Tests“ gegeben div Tag und platziert den Text mit der Aufschrift „Absatz anhängen“ in die Schaltfläche. Damit haben wir das folgende Ergebnis auf dem Bildschirm

JavaScript -Code:

Wir haben eine Schaltfläche mit einer Funktion mit dem Namen "buttonpressed ()" im Skript verknüpft. Wir haben diese Funktion jedoch nicht definiert, und diese Schaltfläche tut nichts. Lassen Sie uns diese Funktion im Skript erstellen, die in diesem Div einen Absatz hinzufügen und zählen, wie oft wir diesen Absatz hinzugefügt haben. Schauen Sie sich den folgenden Code an.

i = 1;
const buttonpressed = () =>
dokumentieren.GetElementById ("Test").Innerhtml +=
"

Sie haben diesen Absatz angehängt " + i +" Zeiten ";
i ++;

Hinweis: Wir haben eine Gegenvariable „I“ erstellt. Dies wird verwendet, um zu überprüfen, wie oft wir diesen Absatz im Div -Tag anhängen.

Wenn wir nun den Code ausführen und die Taste drücken, die wir erhalten:

Notiz: Diese Technik entfernt im Wesentlichen den gesamten Inhalt des DIV und ersetzt sie durch neue Sachen. Alle Hörer, die mit den Kinderknoten dieses DIV verbunden sind. Deshalb verkettet wir es immer.

Unter Verwendung der benachbarten Methode

Die Funktion InsertAdjacentHtml () kann auch verwendet werden. Diese Methode ist nützlich, wenn es darum geht, HTML an einem bestimmten Ort anzuhängen. In dieser Methode werden also zwei Parameter benötigt:

• Der Standort (im Dokument), an dem der Code eingefügt werden sollte ('Afterbei', 'vorabgin', 'Afterend', 'vor')).
  • AFTEBEGIN - direkt nach dem erwähnten HTML -Element, aber innerhalb des Tags.
  • vorabgin - vor dem erwähnten HTML -Element
  • Afterend - nach dem Schlussetikett des HTML -Elements
  • Vor dem Abenden - im HTML -Element, aber vor dem Schlussetikett
• Sie müssen den HTML -Code, den Sie hinzufügen möchten, innerhalb der Zitate umgeben.

Dies ist die allgemeine Syntax der Methode

Htmlelement.InsertAdjacentHtml ('STANDORT', 'HTML QUELLTEXT');

Verwenden wir das vorherige Beispiel. Der gleiche HTML -Code. Diesmal wäre das Skript jedoch geringfügig anders als:

HTML Quelltext:

Dies ist ein LinuxHint -Tutorial

Absatz anhängen

Hinweis: Da wir das vorherige Beispiel verwenden, ist der HTML -Code genau der gleiche.

JavaScript -Code:

i = 1;
Funktionsknopfdruck ()
dokumentieren.GetElementById ("Test").InsertAdjacenthtml ("vorabgin",
"

Angehängt " + i +" Zeiten vor Div

");
i ++;

Hinweis: Wir verwenden die „Vorabbin”Eigenschaft, um die anzuhängen

Tag vor Beginn der div.

Ausgang:

Das war's, Sie haben gelernt, wie wir einen HTML -Code über JavaScript anhängen können.

Abschluss

Es gibt zwei Methoden, mit denen Sie den HTML -Code in eine Webseite anhängen können. Die erste Methode ist die Verwendung Innerhtml Während die zweite Methode durch die Verwendung der verwendet wird Adjacenthtml Methode. In diesem Artikel haben wir Beispiele sowohl für die InnerHTML- als auch für die Adjacenthtml -Methoden verwendet, um den HTML -Code in eine Webseite anzuhängen.