如何使用 JavaScript 更改元素的 ID？-js教程-PHP中文網

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 13, 2023 pm 02:45 PM

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

一般來說，HTML 文件中任何元素的 ID 都是唯一的，並且只能分配給一個元素一次。但稍後可以使用 JavaScript 更改該 id，遵循新 ID 的唯一性相同規則，並且只有單一元素可以包含新 ID。在本文中，我們將了解使用 JavaScript 變更元素 ID 的方法。

JavaScript 為我們提供或允許我們使用 id 屬性來取得任何元素的 id，以及更改或新增新的 ID 到文件中的任何 HTML 元素。

讓我們藉助程式碼範例了解如何使用 id 屬性透過 JavaScript 來變更 HTML 文件中元素的 ID。

文法

以下語法將向您解釋如何使用 id 屬性來變更、取得新的 id 以及在 HTML 元素中新增新的 id -

Selected_element.id = newID;

在上面的語法中，首先我們將使用HTML DOM 選擇要更改其ID 的HTML 元素，然後使用帶有有點運算符的id 屬性在其右側分配一個新的id賦值運算符。

讓我們透過程式碼範例了解 id 屬性變更 HTML 文件中元素 ID 的實際實作。

演算法

第1 步 - 在第一步驟中，我們將新增一個輸入元素以取得新ID 作為使用者的輸入，稍後我們將更改相同輸入元素的ID使用id 屬性。
步驟 2 - 在此步驟中，我們將使用 onclick 事件在 HTML 文件中新增一個按鈕元素，該事件稍後將呼叫 JavaScript 函數來變更輸入元素的 ID。
第 3 步 - 在下一步中，我們將抓取輸入元素並向使用者顯示該元素的初始 id，以便他們可以輕鬆看到 ID 的變化元素。
第4 步驟 - 在第四步驟中，我們將定義一個JavaScript 函數，在其中再次取得輸入元素並將其id 設定為等於使用者在輸入欄中輸入的文本並使用id 屬性將其id 更改為該文字。
第5 步驟 - 在最後一步中，我們將使用id 屬性顯示指派給元素的新ID，並將函數作為值指派給onclick 事件，以便它可以稍後當用戶單擊按鈕時調用它。

範例

下面的範例將說明如何使用 id 屬性來變更 HTML 文件中元素的 id -

<html>
<body>
   <h2 id="Changing-ID-of-the-element-using-JavaScript">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>

在上面的範例中，我們使用 JavaScript 的 id 屬性來變更了輸入元素的 ID，並在使用者畫面上顯示指派給輸入元素的舊 ID 和新 ID。

讓我們再看一個程式碼範例，我們將直接更改 onclick 事件內元素的 ID，而不是向其傳遞函數。

演算法

上例和本例的演算法幾乎相似。您只需更改按鈕元素的 onclick 事件中傳遞的值，如下例所示。

範例

下面的範例將向您解釋必須在前面的演算法中進行的更改，以使其像前面的範例一樣更改輸入元素的 id -

<html>
<body>
   <h2 id="Change-ID-of-the-element-using-JavaScript">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>

在上面的範例中，我們可以更改輸入元素的ID，但在這種情況下，我們無法將先前的id 替換為我們選擇的id，因為我們靜態地將新的ID 值分配給該元素。 p>

在本文中，我們了解如何使用您選擇的id 以及我們想要賦予該元素的靜態id 來更改HTML 文件中存在的元素id，該靜態id 必須是唯一的並且僅文檔中可以包含該id 的單一元素。

以上是如何使用 JavaScript 更改元素的 ID？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。