資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 更改元素的 ID？
通常，HTML 文件中賦予任何元素的 ID 都是唯一的，並且只能為一個元素分配一次。但是，可以使用 JavaScript 稍後更改該 ID，遵循新 ID 的唯一性規則以及只有一個元素可以包含新 ID。在本文中，我們將學習使用 JavaScript 更改元素 ID 的方法。
JavaScript 為我們提供或允許我們使用id 屬性來獲取任何元素的 id，以及更改或向文件中的任何 HTML 元素新增新的 ID。
讓我們看看如何使用id 屬性來使用 JavaScript 在 HTML 文件中更改元素的 ID，並藉助程式碼示例。
語法
以下語法將向您解釋如何使用 id 屬性來更改、獲取和向 HTML 元素新增新的 id：
Selected_element.id = newID;
在上述語法中，我們首先將使用 HTML DOM 選擇要更改其 ID 的 HTML 元素，然後使用點運算子將id 屬性與賦值運算子右側的新 id 關聯。
讓我們瞭解id 屬性在 HTML 文件中更改元素 ID 的實際實現，並提供程式碼示例。
演算法
步驟 1 - 在第一步中，我們將新增一個輸入元素以從使用者處獲取新的 ID 作為輸入，稍後我們將使用 id 屬性更改同一輸入元素的 ID。
步驟 2 - 在此步驟中，我們將向 HTML 文件新增一個按鈕元素，並帶有 onclick 事件，該事件稍後將呼叫 JavaScript 函式來更改輸入元素的 ID。
步驟 3 - 在下一步中，我們將獲取輸入元素並將元素的初始 id 顯示給使用者，以便他們可以輕鬆檢視元素 ID 的變化。
步驟 4 - 在第四步中，我們將定義一個 JavaScript 函式，在該函式中，我們將再次獲取輸入元素並將其 id 設定為使用者在輸入欄中輸入的文字，並使用 id 屬性將其 id 更改為該文字。
步驟 5 - 在最後一步中，我們將使用 id 屬性顯示分配給元素的新 ID，並將函式作為值分配給 onclick 事件，以便稍後在使用者單擊按鈕時可以呼叫它。
示例
以下示例將說明如何使用 id 屬性在 HTML 文件中更改元素的 id：
<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>
在上面的示例中，我們使用 JavaScript 的 id 屬性更改了 input 元素的 ID，並在使用者螢幕上顯示了分配給 input 元素的舊 ID 和新 ID。
讓我們再看一個程式碼示例，我們將在 onclick 事件內部直接更改元素的 ID，而不是將函式傳遞給它。
演算法
上述示例和本示例的演算法幾乎相同。您只需要更改按鈕元素的 onclick 事件中傳遞的值，如下面的示例所示。
示例
下面的示例將向您解釋您需要對以前的演算法進行哪些更改才能使其像前面的示例一樣更改輸入元素的 id：
<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>
在上面的示例中，我們可以更改 input 元素的 ID，但在這種情況下，我們無法用我們選擇的 ID 替換以前的 ID，因為我們正在靜態地將新的 ID 值分配給元素。
在本文中，我們學習瞭如何更改 HTML 文件中存在的元素的 id 的方法，可以使用您選擇的 id，以及我們想要賦予元素的靜態 id，該 id 必須是唯一的，並且文件中只有一個元素可以包含該 id。
4K+ 次瀏覽
