使用JavaScript添加元素后刷新document.element。

Question

我有一个JavaScript脚本，当我点击按钮时会在页面中添加元素。我想要使用这些新元素，调用它们。

var e = document.getElementsByName('group');

在我添加一个名为“group”的元素之前和之后执行该操作时（在源代码中进行了检查），我拥有相同数量的元素。

e.length /* before : return 2 */
e.length /* after... 2 :/ */

我认为文档没有更新，这是真的吗？你有任何解决方案吗？

编辑：

function newgroup() {
        var e = document.getElementsByName('group');
        var nb = e.length + 1;
        div = document.createElement("div");
        div.id = 'group'+nb;
        div.className = 'panel_drop';
        div.setAttribute('name', 'group');
        div.innerHTML = '<h5>Group '+nb+'</h5>';
        div.innerHTML += '<div class=\'drop_zone\'></div>';
        document.getElementById('groups').appendChild(div);
    }

我使用属性name来计算组数，并在之后通过它们的id进行选择。但是数量没有更新 ^^ 编辑2： 这是个错误，我在Chrome开发工具中有断点问题。

- nlassaux

---

你能发一下添加元素的代码吗？顺便说一句，像Firebug这样的工具会显示当前DOM（添加后的）。 - Davin Tryon

代码已添加。 - nlassaux

你能贴更多的代码吗？我测试了你所发布的代码，它运行良好。无论添加多少标题元素，它们都将带有正确的编号。 - Radu

你是在添加后再次调用 getElementsByName 还是只查询 e 的 length 属性？ - Ashwin Prabhu

Answer 1

getElementsByName 方法返回一个实时的 NodeList，这意味着结果会随着对 DOM 的更改而自动更新。据我所知，这不是跨浏览器问题，因此你看到的问题可能与此无关。根据规范：

getElementsByName(name) 方法接受一个字符串 name，并且必须返回一个活性 NodeList，其中包含文档中所有具有名称属性且值等于参数 name（区分大小写）的 HTML 元素，按树顺序排列。当使用相同参数再次在 Document 对象上调用该方法时，用户代理可以返回与早期调用返回的对象相同的对象。否则，必须返回一个新的 NodeList 对象。

示例：

http://jsfiddle.net/hhdPB/

var e = document.getElementsByName('group');

console.log(e.length); // 0

var el = document.createElement('span');
el.setAttribute('name', 'group');

document.body.appendChild(el);

console.log(e.length); // 1

document.body.appendChild(el.cloneNode(false));

console.log(e.length); // 2

此外，您发布的代码似乎运行良好：

http://jsfiddle.net/GyTBw/1

function newgroup() {
    var e = document.getElementsByName('group');
    var nb = e.length + 1;
    console.log(nb);
    div = document.createElement("div");
    div.id = 'group' + nb;
    div.className = 'panel_drop';
    div.setAttribute('name', 'group');
    div.innerHTML = '<h5>Group ' + nb + '</h5>';
    div.innerHTML += '<div class=\'drop_zone\'></div>';
    document.getElementById('groups').appendChild(div);
}

for (var i = 0; i != 5; i++) {
    newgroup(); // 1 2 3 4 5
}

- Radu

Answer 2

我在使用Chrome开发工具时犯了一个错误，导致出现了问题。对此十分抱歉。

- nlassaux

---

没问题，你不需要道歉 :) 不过，我建议你将这个作为问题的编辑而不是单独的回答发布。此外，如果你觉得你的问题已经得到了解答，请点击勾选标记。或者，你可以提供更多关于你的错误的细节并将其提交为答案，这样其他人在未来也能从中受益。 - Radu

Answer 3

你应该使用 JQuery 和类（Classes）而不是元素名称（ElementNames）。

例如：

<div class="MyDivs">abc</div>
<div class="MyDivs">def</div>
<div class="MyDivs">ghi</div>

将被选择为：

var Divs = $(".MyDivs");

- Angelo

---

这并没有回答问题，为什么DOM没有更新。 - James