用JQuery或JS改變div的id的五種方法

div的id是可以改變的，通常使用的方法是通過JQuery或Javascript來實現。本文介紹用JQuery或JS改變div的id的五種方法。

方法一：使用Tag選擇器

JQuery代碼如下：

• <div id="myDivId">測試</div>
• <script type="text/javascript">
• $('div').attr('id','myDivId_new');
• </script>

Javascript代碼如下：

• <div id="myDivId">測試</div>
• <script type="text/javascript">
• document.getElementsByTagName("div").id = 'myDivId_new';
• </script>

代碼解釋：上面的代碼是把div的id名稱由原來的“myDivId”改為“myDivId_new”。

注意問題：這個方法有很大的局限性，只當網頁只有一個div標簽時才正確，而絕大多數網頁是不止一個div標簽。

方法二：通過Class選擇器

JQuery代碼如下：

• <div id="myDivId" class="myDivClass">測試</div>
• <script type="text/javascript">
• $('.myDivClass').attr('id','myDivId_new');
• </script>

代碼解釋：上面的代碼是把class為“myDivClass”的div的id名稱由原來的“myDivId”改為“myDivId_new”。

注意問題：這個方法也有較大的局限性，只當網頁只有一個div的class為“myDivClass”時才正確，而網頁通常一個class有多個div在使用。

方法三：通過id選擇器（推薦）

JQuery代碼：

• <div id="myDivId" class="myDivClass">測試</div>
• <script type="text/javascript">
• $('#myDivId').attr('id', 'myDivId_new');
• </script>

Javascript代碼：

• <div id="myDivId" class="myDivClass">測試</div>
• <script type="text/javascript">
• document.getElementById("myDivId").id = 'myDivId_new';
• </script>

代碼解釋：上面的代碼是把id為“myDivId”的div的id名稱由原來的“myDivId”改為“myDivId_new”。

這個方法最好，因為它不受任何限制，即是不受網頁的div數量限制，也不管網頁有多少個div具有相同的class名稱。

這是推薦大家使用的一個方法。

方法四：使用setAttribute

不單單是id，我們還可以改變div的class，或更多事件，或其他屬性。

• document.getElementById('demo').setAttribute('id','demoSecond');
• document.getElementById('demo').setAttribute('class','new');
• document.getElementById('demo').setAttribute('onclick','doThis();');

這里要用到setAttribute。

方法五：使用querySelector

還可以用querySelector()來改變div的id，代碼如下：

• document.querySelector("#divId").id = "newId";

注意： querySelector() 方法僅僅返回匹配指定css選擇器的第一個元素。例如：

獲取文檔中第一個 <p> 元素：

• document.querySelector("p");

獲取文檔中 class="example" 的第一個 <p> 元素：

• document.querySelector("p.example");

獲取文檔中有 "target" 屬性的第一個 <a> 元素：

 

• document.querySelector("a[target]");

所以這個方法的局限性非常大。這里僅作介紹，但不作推薦使用。