Kann JQuery Elemente zu Divs hinzufügen?-Front-End-Fragen und Antworten-php.cn

Kann JQuery Elemente zu Divs hinzufügen?

青灯夜游

Freigeben： 2022-04-21 13:09:49

Original

5067 Leute haben es durchsucht

jquery kann Elemente zu Divs hinzufügen. Methoden: 1. Verwenden Sie „$(“div“).append(new element)“, um neue Elemente am Ende des div hinzuzufügen ("div")"-Anweisung; 3. Verwenden Sie "$("div").prepend(new element)".

Kann JQuery Elemente zu Divs hinzufügen?

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jquery kann Elemente zu Divs hinzufügen.

Das Hinzufügen von Elementen zu einem Div bedeutet das Hinzufügen von Unterelementen zum Div. In diesem Artikel werden sie Ihnen vorgestellt.

4 Möglichkeiten, untergeordnete Elemente zu divs mit jquery hinzuzufügen

Methode 1: Verwenden Sie die append()-Methode

Verwenden Sie die append()-Methode, um untergeordnete Elemente am „Ende“ innerhalb des div-Elements hinzuzufügen .

Syntax:

$(A).append(B)

Nach dem Login kopieren

bedeutet das Einfügen von B am Ende von A.

Beispiel:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("#btn").click(function () {
                var newp = "<p>一个新段落</p>";
                $("div").append(newp);
            })
        })
    </script>
	</head>
	<body>
		<div style="background-color: #FF0000;">
			<p>第一段文本</p>
			<p>第二段文本</p>
			<p>第三段文本</p>
		</div>
		<input id="btn" type="button" value="插入" />
	</body>
</html>

Nach dem Login kopieren

Kann JQuery Elemente zu Divs hinzufügen?

Methode 2: Verwenden Sie die appendTo()-Methode.

appendTo( ) kann auch Unterelemente zum „Ende“ innerhalb des div-Elements hinzufügen,

appendTo( ) und append ( ) Obwohl die Funktionen dieser beiden Methoden ähnlich sind, sind ihre Betriebsziele vertauscht.

Syntax:

$(A).appendTo(B)

Nach dem Login kopieren

bedeutet, dass A am Ende von B eingefügt wird.

Beispiel:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).appendTo("div");
		
	})
})

Nach dem Login kopieren

Kann JQuery Elemente zu Divs hinzufügen?

Methode 3: Verwenden Sie prepend( )

Die prepend( )-Methode kann untergeordnete Elemente am „Anfang“ innerhalb des div-Elements hinzufügen.

Syntax:

$(A).prepend(B)

Nach dem Login kopieren

bedeutet das Einfügen von B am Anfang von A.

Beispiel:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$("div").prepend(newp);
	})
})

Nach dem Login kopieren

Kann JQuery Elemente zu Divs hinzufügen?

Methode 4: Verwenden Sie prependTo( )

prependTo( ) kann auch untergeordnete Elemente zum „Anfang“ innerhalb des div-Elements hinzufügen.

prependTo( ) und prepend( ) Obwohl die Funktionen dieser beiden Methoden ähnlich sind, sind ihre Operationsobjekte umgekehrt.

Syntax:

$(A).prependTo(B)

Nach dem Login kopieren

bedeutet, dass A am Anfang von B eingefügt wird.

Beispiel:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).prependTo("div");
		
	})
})

Nach dem Login kopieren

Kann JQuery Elemente zu Divs hinzufügen?

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonKann JQuery Elemente zu Divs hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!