Могу ли я изменить идентификатор элемента HTML с помощью Javascript? - PullRequest
6 голосов
/ 24 сентября 2010

У меня есть переменная javascript obj, которая представляет элемент в DOM, и я хочу изменить его ID. Я попытался сделать это следующим образом, что также показывает, что это не работает!

obj.id = "newID";

alert(obj.id); // this gives me newID as required

var element = document.getElementById("newID");

if (element != null) { alert("Hooray"); // this alert never gets displayed! }

Что не так с моим кодом выше, это означает, что идентификатор, кажется, изменен, но не обнаружен в DOM? Большое спасибо заранее.

Ответы [ 7 ]

5 голосов
/ 24 сентября 2010

Поскольку вы не дали нам весь код, я предполагаю, что у вас, вероятно, есть что-то похожее на это в вашем коде

obj = document.createElement("div");
obj.id = "something";

// ...

obj.id = "newID";

alert(obj.id); // this gives me newID as required

var element = document.getElementById("newID");

if (element != null) { alert("Hooray"); // this alert never gets displayed! }

В этом конкретном случае document.getElementById("newID") вам ничего не вернетпоскольку элемент не был добавлен на страницу и, следовательно, он не найден на странице.

3 голосов
/ 24 сентября 2010

код, который вы показываете, работает;проблема, вероятно, в коде, который ищет и присваивает obj.Я предполагаю, что это просто объект javascript, а не часть дерева DOM.

3 голосов
/ 24 сентября 2010

Нет причин, по которым это не должно работать с использованием чистого JavaScript. Вот рабочая скрипка , которая показывает, что она работает. Вам не нужно решение jQuery или любой другой метод JavaScript, id = "foo"; - это самый простой способ изменить идентификатор объектов DOM.

Посмотрите на мою приведенную выше скрипку и попытайтесь понять, в чем разница между вашим кодом и моим.

1 голос
/ 24 сентября 2010

Ваш код выглядит нормально, хотя, если вы так комментируете свой код, вы можете понять, что скобка никогда не закрывается из-за комментария.

if (element != null) { alert("Hooray"); // this alert never gets displayed! } <-- this brace
0 голосов
/ 24 сентября 2010

Есть еще одна вещь, которую нужно учитывать.Вы пытаетесь сделать это до того, как DOM будет готов?Этот элемент уже загружен?Если вы попытаетесь изменить элемент, которого DOM не имеет в дереве, вы потерпите неудачу.

0 голосов
/ 24 сентября 2010

Попробуйте это:

У меня работает

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>test</title>
</head>
<body bgcolor="#ffffff">

    <script type="text/javascript">
        function ChangeID(elementId, newId) {
            var obj = document.getElementById(elementId);
            obj.id = newId;
        }

        function SetContent(elementId, content) {
            var obj = document.getElementById(elementId);
            obj.innerHTML = content;
        }
    </script>

    <div id="div1"></div>

    <a href="#" onclick="ChangeID('div1', 'div6');">ChangeID</a><br />
    <a href="#" onclick="SetContent('div6', 'this is the contents');">Set Contents</a>





</body>
</html>
0 голосов
/ 24 сентября 2010

Да, можно, вот решение с jquery

$("#xxx").attr("id", "yyy");

или

getElementById("xxx").setAttribute("id", "yyy");
...