Heim > Artikel > Web-Frontend > Wie ändere ich die ID eines Elements mit JavaScript?

Wie ändere ich die ID eines Elements mit JavaScript?

WBOYnach vorne: 2023-09-13 14:45:131515Durchsuche

如何使用 JavaScript 更改元素的 ID？

Im Allgemeinen ist die ID jedes Elements in einem HTML-Dokument eindeutig und kann einem Element nur einmal zugewiesen werden. Diese ID kann jedoch später mithilfe von JavaScript geändert werden. Dabei gelten dieselben Regeln für die Eindeutigkeit der neuen ID, und nur ein einzelnes Element kann die neue ID enthalten. In diesem Artikel werden wir uns mit Möglichkeiten befassen, die ID eines Elements mithilfe von JavaScript zu ändern.

JavaScript stellt das Attribut id zur Verfügung oder ermöglicht es uns, es zu verwenden, um die ID eines beliebigen Elements abzurufen sowie jedes HTML-Element im Dokument zu ändern oder eine neue ID hinzuzufügen.

Lassen Sie uns anhand eines Codebeispiels lernen, wie Sie die ID eines Elements in einem HTML-Dokument über JavaScript mithilfe des Attributs id ändern.

Grammatik

Die folgende Syntax erklärt Ihnen, wie Sie das id-Attribut verwenden, um ein HTML-Element zu ändern, eine neue ID zu erhalten und eine neue ID hinzuzufügen -

Selected_element.id = newID;

In der obigen Syntax wählen wir zuerst das HTML-Element aus, dessen ID wir mithilfe des HTML-DOM ändern möchten, und weisen dann auf der rechten Seite einen neuen ID-Zuweisungsoperator zu, indem wir das Attribut id mit dem Punktoperator verwenden.

Lassen Sie uns anhand eines Codebeispiels die praktische Implementierung des Attributs id verstehen, das die ID eines Elements in einem HTML-Dokument ändert.

Algorithmus

Schritt 1 – Im ersten Schritt fügen wir ein Eingabeelement hinzu, um die neue ID als Eingabe vom Benutzer zu erhalten, und später ändern wir die ID desselben Eingabeelements mithilfe des id-Attributs.
Schritt 2 – In diesem Schritt fügen wir mithilfe des onclick-Ereignisses ein Schaltflächenelement zum HTML-Dokument hinzu, das später eine JavaScript-Funktion aufruft, um die ID des Eingabeelements zu ändern.
Schritt 3 – Im nächsten Schritt greifen wir auf das Eingabeelement und zeigen dem Benutzer die ursprüngliche ID dieses Elements an, damit er die sich ändernde ID des Elements leicht erkennen kann.
Schritt 4 – Im vierten Schritt definieren wir eine JavaScript-Funktion, bei der wir erneut das Eingabeelement abrufen und seine ID auf den vom Benutzer in das Eingabefeld eingegebenen Text setzen und seine ID mithilfe des ID-Attributs für ändern diesen Text.
Schritt 5 – Im letzten Schritt verwenden wir das id-Attribut, um die dem Element zugewiesene neue ID anzuzeigen und weisen die Funktion als Wert dem onclick-Ereignis zu, damit sie später aufgerufen werden kann, wenn der Benutzer auf die Schaltfläche klickt .

Beispiel

Das folgende Beispiel veranschaulicht, wie Sie das id-Attribut verwenden, um die ID eines Elements in einem HTML-Dokument zu ändern -

<html>
<body>
   <h2>Changing ID of the element using JavaScript</h2>
   <p>Enter new ID, you want to give to element:</p>
   <input type = "text" id = "inp1"> <br> <br>
   <button id = "btn" onclick = "display()"> Click to change the ID </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you entered ID of your choice is: <b> " + inp1.id + " </b> <br>"
      function display() {
         var inp = document.getElementById('inp1');
         var newID = inp.value;
         inp.id = newID;
         result.innerHTML += " The ID of input element after clicking the button is changed to: <b> " + inp.id + " </b> <br> ";
      }
   </script>
</body>
</html>

Im obigen Beispiel haben wir die ID des Eingabeelements mithilfe des id-Attributs von JavaScript geändert und die dem Eingabeelement zugewiesene alte und neue ID auf dem Bildschirm des Benutzers angezeigt.

Sehen wir uns ein weiteres Codebeispiel an, in dem wir die ID des Elements direkt im Onclick-Ereignis ändern, anstatt ihm eine Funktion zu übergeben.

Algorithmus

Die Algorithmen des obigen Beispiels und dieses Beispiels sind fast ähnlich. Sie müssen lediglich den im onclick-Ereignis des Schaltflächenelements übergebenen Wert ändern, wie im folgenden Beispiel gezeigt.

Beispiel

Das folgende Beispiel erklärt Ihnen die Änderungen, die im vorherigen Algorithmus vorgenommen werden müssen, damit er die ID des Eingabeelements wie im vorherigen Beispiel ändert –

<html>
<body>
   <h2>Change ID of the element using JavaScript</h2>
   <p>Click the button below to change the ID of the below input element:</p>
   <input type = "text" id = "inp1", value = "Input Element"> <br> <br>
   <button id = "btn" onclick = "document.getElementById('inp1').id = 'newID'; return false">    Click to change the ID
   </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you clicked the button is: <b> " + inp1.id + " </b> <br><br>"
      result.innerHTML += "<b>Note: </b>To see the change in the ID of the input element open the developer tools and inspect the input element to see its ID after clicking the button. ";
   </script>
</body>
</html>

Im obigen Beispiel können wir die ID des Eingabeelements ändern, aber in diesem Fall können wir die vorherige ID nicht durch die ID unserer Wahl ersetzen, da wir dem Element statisch den neuen ID-Wert zuweisen. p>

In diesem Artikel haben wir gelernt, wie man die ID eines in einem HTML-Dokument vorhandenen Elements mithilfe einer ID Ihrer Wahl und einer statischen ID, die wir diesem Element geben möchten, ändern kann. Diese statische ID muss eindeutig sein und darf nur im Dokument enthalten sein das ist ein einzelnes Element.

Das obige ist der detaillierte Inhalt vonWie ändere ich die ID eines Elements mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 运算符赋值运算符事件 dom 算法

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Implementierung von Diagrammen in JavaScriptNächster Artikel：Implementierung von Diagrammen in JavaScript

In Verbindung stehende Artikel

Mehr sehen