我可以使用 Javascript 更改 HTML 元素的 ID 吗？

发布于 2024-09-24 15:22:52 字数 354 浏览 6 评论 0原文

我有 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! }

我上面的代码有什么问题，这意味着 id 似乎已更改但未在 DOM 中获取？非常感谢。

原文

I have javascript variable obj which represents an element in the DOM and I wish to change its ID. I have attempted to do this by the following, which also illustrates that it does not work!

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

What is wrong with my code above that means that the id seems to be changed but not picked up in the DOM? Many thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

本宫微胖 2024-10-01 15:22:54

您的代码看起来不错，但如果您在代码中以这种方式进行注释，您可以意识到大括号永远不会由于注释而关闭。

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

Your code looks fine, although if you are commenting that way in your code, you can realize that the brace is never closed due to the comment.

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

回复收藏 0 原文

沧桑㈠ 2024-10-01 15:22:54

试试这个：

对我有用

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

Try this:

Works for me

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

眉黛浅 2024-10-01 15:22:54

还有一件事需要考虑。您是否想在 DOM 准备好之前执行此操作？该元素加载了吗？如果您尝试更改 DOM 树中没有的元素，您将悄悄失败。

回复收藏 0 原文

枕梦 2024-10-01 15:22:54

是的，你可以，这是一个使用 jquery

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

或的解决方案

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

Yes you can, here is a solution with jquery

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

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

回复收藏 0 原文

伴我老 2024-10-01 15:22:53

由于您没有给我们完整的代码，我的猜测是您的代码中可能有类似的内容

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") 不会返回任何内容由于该元素未添加到页面，因此在页面中找不到它。

Since you haven't give us the whole code my guess is that you probably have something similar to this in your code

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

In that particular case, document.getElementById("newID") won't return you anything since the element wasn't added to the page and therefore it is not found in the page.

回复收藏 0 原文