为动态元素创建JavaScript变量

Question

我有一个div，其中包含用户发送的消息更新。 如何为该div分配一个javascript变量，使其值始终是该div的当前内容，该内容始终与消息一起更新？

var x = document.getElementById("MessageBox"); // only equals value at the 
// time rather than present value

Answer 1

完成此操作的最简单方法是为元素分配.onchange事件处理程序，然后将节点的值分配给函数范围之外的变量：

var myMSGvalue;
document.getElementById("MessageBox").onchange = function () {
    myMSGvalue = this.value;
    // this will work for <input>, not <div>
}

如果确实需要将数据分配给html元素，则应使用<input type="hidden"> 。

但是，最好在将数据附加到页面之前将其分配给变量。 例如，假设您有一个Web套接字：

var messages = [];
socket.on("msg", function (msg) {
    messages.push(msg);
    // msg: { content: "Hello!", author: "notSure" };
    functionToAppendToPage(msg);
})

现在，您可以看到在message中收到的所有messages ， messages[messages.length - 1]将返回最后收到的消息（前提是至少已收到一条消息）。

Answer 2

如果您的消息框字段使用任何Api或通过Ajax获取数据。 您可以在将值分配给消息框之前更新变量。