使用javascript添加后刷新document.element

Refresh document.element after an add with javascript

本文关键字：document element 刷新 javascript 添加 使用      更新时间：2024-05-24

我有一个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开发工具的断点方面遇到了问题。

getElementsByName返回一个活动的NodeList，这意味着在对DOM进行更改时会自动更新结果。据我所知，这不是跨浏览器问题。。所以你看到的问题很可能是无关的。来自规格：

getElementsByName（name）方法采用字符串名称，并且必须返回一个实时NodeList，其中包含具有值等于名称的名称属性的文档参数（以区分大小写的方式），按树顺序排列。当方法使用相同的参数再次对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
}

这是我操作chrome开发人员工具时的一个错误，带有中断。。感谢和抱歉

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

例如：

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

将由选择

var Divs = $(".MyDivs");
相关文章：