Javascript 将新属性附加到元素

Question

我有一个对象 X 和一些创建 div 并分配 id = X.ID 的代码。创建 html 后，我将对象分配给 div，如下所示:

document.getElementById(X.ID).XValue = X;

如果我在该语句后设置中断，我可以评估 document.getElementById(X.ID).XValue 并查看 X 的所有属性。

在创建 html 时，我添加了 onmouseup="MOUSE_UP(event)"。

var aProp = {};
aProp.ThisValue = "This";
aProp.ThatValue = "That";
aProp.Id = 5;
var html = '<div id="' + aProp.Id + '"';
var func = 'MOUSE_UP';
html += ' onmouseup="' + func + '(event) ">';
html += '</div>';
document.getElementById("test").innerHTML += html;
document.getElementById(aProp.Id).XVALUE = aProp;

function MOUSE_UP(event) {
    alert(event.currentTarget.XValue.ThisValue);
}

现在，当我在 MOUSE_UP 设置中断时，event.currentTarget 是我的 div (event.currentTarget.id == X.ID)，但 event.currentTarget.XValue 未定义。

为什么之前定义了 XValue 却在这里未定义？

Answer 1

看起来设置 #test 的 innerHTML 会清除其子项中的所有自定义属性。您可以在jsFiddle中检查这一点。当您按原样运行 fiddle 时，您会注意到在使用 添加更多内容后，#1 的 NewProp 将变为 undefined >test.innerHTML += ... 如果您记录 tabIndex 而不是 NewProp，您将获得正确的值。

发生这种情况是因为 += 运算符只是诸如 a = a + b 之类的语句的快捷方式，也可以写成 a += b.

基本上，您从 #test 的内部 HTML 创建一个字符串，然后向其中添加另一个字符串，最后替换 #test< 的原始 innerHTML/code> 使用这个新字符串。 #test 中的所有先前元素都将替换为新元素，这些元素没有设置自定义属性。

当为元素设置id属性时，id属性也会添加到HTML中，因此它们是innerHTML的一部分code>#test，并且也添加到新创建的 HTML 中。

如果您使用正确的 DOM 操作而不是设置 innerHTML，您将获得您想要的结果。下面的代码使用 createElement()和 appendChild()方法而不是设置 innerHTML。

function myMouseUp(e) {
    alert("at MouseUp " + e.currentTarget.NewProp.ThisValue);
}

function buildOneDiv(aProp) {
    var html = document.createElement('div');
    aProp.ThisValue = 'This is ' + aProp.id;
    aProp.ThatValue = 'That is ' + aProp.id;
    html.id = aProp.id;
    html.addEventListener('mouseup', myMouseUp, false);
    html.innerHTML = 'Test ' + aProp.id;
    return html;
}

function buildDivs(x) {
    var html = buildOneDiv(x);
    document.getElementById("test").appendChild(html);
    document.getElementById(x.id).NewProp = x;
}

window.onload = function () {
    var aProp, i;
    for (i = 1; i < 4; i++) {
        aProp = {};
        aProp.id = i;
        buildDivs(aProp);
    }
};

A live demo at jsFiddle .