用JQuery或JS改变div的id的五种方法
Posted 那个远方
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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]");
所以这个方法的局限性非常大。这里仅作介绍,但不作推荐使用。
以上是关于用JQuery或JS改变div的id的五种方法的主要内容,如果未能解决你的问题,请参考以下文章