Можно ли изменить идентификатор HTML-элемента с помощью Javascript?

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

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? Большое спасибо заранее.

6
dom getelementbyid javascript

7 ответов

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

3

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

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") не вернет вам ничего, так как элемент не был добавлен на страницу, и поэтому он не найден на странице.

5

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

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

3

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

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

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

для меня

<!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

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

0

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

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

или

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