suchen

Heim >Web-Frontend >js-Tutorial >Wie füge ich mit jQuery/JavaScript Inhalt zu einem Abschnitt hinzu?

Wie füge ich mit jQuery/JavaScript Inhalt zu einem Abschnitt hinzu?

王林
王林nach vorne
2023-09-17 11:49:02983Durchsuche

如何使用 jQuery/JavaScript 在部分中添加内容？

Wir können Inhalte zum 93f0f5c25f18dab9d176bd4f6de5d30e-Bereich der Website hinzufügen, indem wir die Methoden „append“ oder „prepend“ von jQuery verwenden. Dies kann durch Auswahl des 93f0f5c25f18dab9d176bd4f6de5d30e-Elements mit der „selector“-Methode von jQuery und anschließendem Hinzufügen des erforderlichen Inhalts mit der entsprechenden Methode erfolgen. Darüber hinaus können wir mithilfe des JavaScript-Attributs „innerHTML“ Inhalte zum Abschnitt 93f0f5c25f18dab9d176bd4f6de5d30e hinzufügen.

Es gibt viele Möglichkeiten, Inhalte programmgesteuert zum Head-Tag hinzuzufügen. Heute werden wir drei davon besprechen -

  • Verwenden Sie die .append()-Methode von jQuery -

  • Verwenden Sie die document.createElement()-Methode von JavaScript -

  • Verwenden Sie die Methode insertAdjacentHTML() von JavaScript -

Verwenden Sie diese drei Methoden, um die gleiche Aufgabe zu erfüllen, nämlich das Hinzufügen von Inhalten zum d24920cbaa5caf2d2dac816929b26725-Tag einer HTML-Datei.

Lassen Sie uns diese Methoden also einzeln besprechen.

Methode 1: Verwenden Sie die .append()-Methode von jQuery

Dies ist ein einfacher Einzeiler zum Anhängen von Inhalten an jedes beliebige Tag in HTML (in unserem Fall ist es das Head-Tag) -

$("head").append("alert('hello');");

Methode 2: Verwenden Sie die document.createElement()-Methode von JavaScript

Mit der JavaScript-Funktion createElement() und dann der Funktion appendChild() können wir die gleiche Funktionalität wie diese erreichen -

var script = document.createElement("script");
script.innerHTML = "alert('hello');";
document.getElementsByTagName("head")[0].appendChild(script);

Methode 3: Verwenden Sie die Methode insertAdjacentHTML() von JavaScript

Die letzte Methode, die wir besprechen werden, ist die insertAdjacentHTML()-Methode von JavaScript -

document.head.insertAdjacentHTML("beforeend", "alert('hello');");

Da wir nun alle diese Methoden einzeln besprochen haben, wollen wir sie in einem Arbeitsbeispiel verwenden.

Beispiel

Der vollständige Code lautet wie folgt -

<html>
<head>
   <title>Content in head section</title>
</head>
   <body>   
      <h1 style = "color: black;">Welcome to my website</h1>  
   <script src="https://code.jquery.com/jquery-3.6.0.min.js">
   </script>    
      <script>
         // Using jQuery's .append() method
         $("head").append("<link rel='stylesheet' href='styles.css'>");
         // Using JavaScript's document.createElement() method
         var meta = document.createElement("meta");
         meta.name = "description";
         meta.content = "This is my website";
         document.getElementsByTagName("head")[0].appendChild(meta);
      </script>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonWie füge ich mit jQuery/JavaScript Inhalt zu einem Abschnitt hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html append 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 kann ich mithilfe von JavaScript überprüfen, ob ein Array eine Teilmenge eines anderen Arrays ist?Nächster Artikel：Wie kann ich mithilfe von JavaScript überprüfen, ob ein Array eine Teilmenge eines anderen Arrays ist?

In Verbindung stehende Artikel

Mehr sehen