Wie füge ich mit jQuery/JavaScript Inhalt zu einem Abschnitt hinzu?-js-Tutorial-php.cn

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

王林

Freigeben： 2023-09-17 11:49:02

nach vorne

986 Leute haben es durchsucht

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

Wir können Inhalte zum -Bereich der Website hinzufügen, indem wir die Methoden „append“ oder „prepend“ von jQuery verwenden. Dies kann durch Auswahl des -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 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 -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');");

Nach dem Login kopieren

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

Nach dem Login kopieren

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');");

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!