在JavaScript中

Question

如何动态设置div id？这是我的代码：

<div id="q1"></div>
<div id="q2"></div>
<div id="q3"></div>
<div id="q4"></div>
<div id="q5"></div>

现在我想将q4 div id设置为q1，就像在JavaScript中一样。我怎么能用JavaScript或jQuery做到这一点？

我试过这个。

 document.getElementById("q4").id = "q1"; 
 document.getElementById("q2").id = "q5";

但是它说该对象为null或未定义。

感谢。琳。

Answer 1

使用jquery：

逐个动态设置：

var idCount = 1;
$('div').each(function() {
   $(this).attr('id', 'q' + idCount);
   idCount++;
});

重新安排你想要的东西：

$('div#q4').attr('id', 'q1');
$('div#q2').attr('id', 'q5');

Answer 2

$('#q1').attr('id', 'q4')我认为它是灵魂的工作......

编辑：

如果它仍然无效，请尝试将其放在</body>之前：

<script>
    $(document).ready(function(){
        $('#q1').attr('id', 'q4')
    });
</sript>

Answer 3

首先，你要给一个元素的id给一个已经给某个元素的id，这不是一件正确的事情，你在DOM中不能有多个id。无论如何，代码将类似于

    var element = document.getElementById('q4');
    element.setAttribute('id', 'q7');
    if(document.getElementById('q7').innerHTML = "All is well")
          alert(document.getElementById('q7').innerHTML);    //to check if the new id has been set correctly

小提琴http://jsfiddle.net/kmSHB/

Answer 4

您的代码很好，这意味着如果它失败了，您可能在DOM中定义了这些元素之前运行JavaScript。尝试将脚本块移动到下面这些元素（例如，页面底部），或将代码放在DOM加载/就绪处理程序中。

<小时/> 编辑：不知道为什么这会被投票，但无论如何。如果你想在等待DOM ready事件时在jQuery中执行此操作，这应该可以工作：

$(function() {
    $('#q4').attr('id', 'q1');
    $('#q2').attr('id', 'q5');
});

请注意，这里的重要部分不是设置id是在jQuery或vanilla JavaScript中完成的事实 - 重要的是我们要等到DOM准备好进行操作。

Answer 5

您的代码运行正常。除此之外，您将拥有2个具有相同ID的div。因此，如果您再次尝试 q1 ，则会遇到问题。

Answer 6

试试这个..

var divid = document.getElementById（'q1'）;

divid.id ='q5';

Answer 7

在jQuery中你可以这样做：

$('#q4').attr('id', 'q1');

但是，请注意，现在这将使您无法使用标记，因为您不能在文档中多次使用相同的ID。

Answer 8

在JavaScript中

var yourElement = document.getElementById('originalID');
yourElement.setAttribute('id', 'yourNewID');

在jQuery中

$('#originalID').attr('id', 'yourNewID');

JSFiddle example

在JavaScript或jQuery中动态设置div id

8 个答案:

在JavaScript中

在jQuery中