ID zu Element hinzufügen mit JavaScript
-
Verwenden Sie die Funktion
setAttribute(), umidzu einem Element in JavaScript hinzuzufügen -
Hinzufügen einer
idzu einem bereits existierenden Element mit JavaScript -
Hinzufügen von
idzu einem neuen Element mit JavaScript
Das Attribut id spielt eine wichtige Rolle in JavaScript, das sich auf ein bestimmtes Element bezieht, das mit der Funktion getElementById() geeignet ist. Die id muss in der HTML-Seite eindeutig sein, da sie später hilft, die Werte und den Inhalt des HTML-Elements zu erhalten.
Angesichts der Bedeutung des Attributs id lehrt dieses Tutorial, wie man das Attribut id mit JavaScript zu einem bereits bestehenden oder neuen HTML-Element hinzufügt.
Verwenden Sie die Funktion setAttribute(), um id zu einem Element in JavaScript hinzuzufügen
Für bereits vorhandene und neue HTML-Elemente wird die Funktion setAttribute() und die Eigenschaft .id verwendet. Das setAttribute() nimmt zwei Parameter entgegen.
Der erste ist der Attributname und der zweite der Wert des Attributs. Der erste Parameter wäre beispielsweise id, und der zweite kann eine beliebige Zeichenfolge sein, um das Attribut id zu diesem bestimmten Element hinzuzufügen.
Andererseits können wir den Wert des Attributs id direkt der Eigenschaft .id zuweisen. Wir werden den folgenden HTML-Startcode verwenden, um einem bereits vorhandenen und einem neuen Element eine id hinzuzufügen.
HTML Quelltext:
<!DOCTYPE html>
<html>
<head>
<title>Add IDs</title>
</head>
<body>
<h1 id="First Heading">My First Heading</h1>
<p id="firstParagraph">My first paragraph.</p>
</body>
</html>
Hinzufügen einer id zu einem bereits existierenden Element mit JavaScript
var firstP = document.getElementById('firstParagraph');
firstP.setAttribute('id', 'firstPracPara');
console.log(document.getElementById('firstPracPara').id);
firstP.id = 'newPracPara';
console.log(document.getElementById('newPracPara').id);
Ausgabe:
"firstPracPara"
"newPracPara"
Wir haben im obigen Code zwei Möglichkeiten verwendet, um das Attribut id hinzuzufügen. Die erste ist die Methode setAttribute() und die zweite die Eigenschaft .id.
Zuerst erhalten wir das Element, dessen ID-Wert firstParagraph ist, verwenden die setAttribute()-Funktion, um einen neuen Wert des id-Attributs festzulegen, und geben auf der Konsole aus, um zu bestätigen, dass es geändert wurde.
Nun wird die id von firstParagraph auf firstPracPara geändert. Ändern wir es wieder, indem wir die Eigenschaft .id verwenden.
Der letzte Wert von id ist newPracPara; druckte es auch auf der Konsole aus, um es zu bestätigen. Sie können die obige Ausgabe sehen.
Hinzufügen von id zu einem neuen Element mit JavaScript
var secondP = document.createElement('p');
secondP.setAttribute('id', 'secondPara');
console.log(secondP.id);
secondP.id = 'newPara';
console.log(secondP.id);
Ausgabe:
"secondPara"
"newPara"
Hier erstellen wir zuerst ein neues Element mit der Funktion createElement() und verwenden dann die Methode setAttribute() und die Eigenschaft .id, um id hinzuzufügen.
