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選擇器的第一個元素。例如：

獲取文件中第一個

元素：

document.querySelector("p");

獲取文件中 class=“example” 的第一個

元素：

document.querySelector("p.example");

獲取文件中有 “target” 屬性的第一個 元素：

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

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