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);
    }

我使用attribut name来计算群组的数量，然后我们用他们的ID选择它们。但是数字没有更新^^

编辑2：

这是一个错误，我在使用Chrome开发工具时遇到了断点问题。

Answer 1

getElementsByName返回实时NodeList，这意味着在您对DOM进行更改时会自动更新结果。据我所知，这不是一个受跨浏览器问题影响的东西..所以你看到的问题很可能是无关的。来自the spec：

getElementsByName（name）方法采用字符串名称，并且必须返回包含其中所有HTML元素的实时NodeList 具有name属性且其值等于名称的文档参数（以区分大小写的方式），按树顺序排列。当方法使用相同的参数（用户）再次在Document对象上调用代理可以返回与先前调用返回的对象相同的代理。在其他情况下，必须返回一个新的NodeList对象。

Eaxmple：

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
}

Answer 2

我对Chrome开发人员工具的操纵是一个错误，有了休息......谢谢和抱歉

Answer 3

您应该使用JQuery和Classes而不是ElementNames。

例如：

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

将通过以下方式选择：

var Divs = $(".MyDivs");

使用javascript添加后刷新document.element

3 个答案: