ID zu Element hinzufügen mit JavaScript

Mehvish Ashiq 12 Oktober 2023
  1. Verwenden Sie die Funktion setAttribute(), um id zu einem Element in JavaScript hinzuzufügen
  2. Hinzufügen einer id zu einem bereits existierenden Element mit JavaScript
  3. Hinzufügen von id zu einem neuen Element mit JavaScript
ID zu Element hinzufügen 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.

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

Verwandter Artikel - JavaScript Element