Hinzufügen einer ID zu einem HTML-Element mit jQuery
-
Verwenden Sie die
.attr()-Methode, um einem HTML-Element mit jQuery eine ID hinzuzufügen -
Verwenden Sie die
.add()-Methode, um einem HTML-Element mit jQuery eine ID hinzuzufügen
In jQuery funktioniert eine explizite Funktion nur, um einem HTML-Element eine Klasse hinzuzufügen. Diese Methode wird als addClass("className") verwendet.
Aber im Fall des Hinzufügens einer id ist keine solche Methode definiert. Im Allgemeinen macht eine id eines HTML-Elements es unterschiedlicher und leistungsfähiger in Bezug auf die Spezifität.
Hier werden wir zwei Möglichkeiten untersuchen, einem HTML-Element eine id hinzuzufügen. Und der gesamte Prozess wird über jQuery-Konventionen durchgeführt.
Die erste Lösung besteht darin, die Methode .attr() zu verwenden und das Attribut id und einen entsprechenden Wert hinzuzufügen. Dadurch wird die id für ein Element gesetzt.
Als nächstes gehen wir zu einem Beispiel, das eine id hinzufügen kann, aber nicht so definiert ist wie das vorherige. Hier nehmen wir ein HTML-Element als Parameter in die Methode .add() und fügen die id hinzu.
Lassen Sie uns also eine Vorschau der Erklärung mit Instanzen anzeigen.
Verwenden Sie die .attr()-Methode, um einem HTML-Element mit jQuery eine ID hinzuzufügen
Wir werden ein p-Tag in unserem body-Element des HTML-Beispiels haben, und es gibt ein bestimmtes Wort im p-Tag, das wir hervorheben möchten. Es ist auch möglich, wenn es ein relevantes Tag gibt, und ihm eine eindeutige id zu geben.
Also erstellen wir ein span-Tag, erstellen eine id dafür und fügen dann eine CSS-Eigenschaft hinzu, um zu sehen, ob die neu erstellte id funktioniert.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to <span>DelftStack</span></p>
<script>
$("span").attr("id","intro");
$("#intro").css("color","darkcyan");
</script>
</body>
</html>
Ausgang:
Verwenden Sie die .add()-Methode, um einem HTML-Element mit jQuery eine ID hinzuzufügen
In diesem Fall haben wir das p-Tag, aber kein span unter dem p-Tag zugewiesen. Wir werden die Instanz des p-Tags abrufen, ein HTML-Element über die .add()-Methode hinzufügen und es an das p-Tag anhängen.
Es zeigt seine Präsenz erst, wenn Sie das neu erstellte Element anhängen. Lassen Sie uns die Codezeilen überprüfen.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>attr Id</title>
</head>
<body>
<p>Welcome to </p>
<script>
$("p").add("<span id='intro'>DelftStack</span>").appendTo("p");
$("#intro").css("color","royalblue");
</script>
</body>
</html>
Ausgang:
