在DOM中添加JavaScript对象

Question

我正在寻找一种将javascript对象添加到DOM而不重新定义对象的方法。

我已经创建了一个函数，将所有对象方法放入一个新对象中，将对象重新定义为一个新的DOM元素，并将所有对象放回到它上面，但这并不是我想要的。我需要更新对象而不使用任何返回语句。

我这里有一个例子：http://jsfiddle.net/y56wS/

function addToDOM(obj) { 
    temp = {}; 
    for (p in obj) { 
     temp[p] = obj[p]; 
    } 
    obj = document.createElement('prop'); 
    document.body.appendChild(obj); 
    for (p in temp) { 
     obj[p] = temp[p]; 
    } 
    return obj; 
} 

var obj = {var1:123}; 
obj = addToDOM(obj); 

生成的代码模板应该是这样的：

function addToDOM(obj) { 
    //Code for method 
    //No return statement 
} 

var obj = {var1:123}; 
//No obj= 
addToDOM(obj); 

要做到这一点，真的有可能成为addToDOM函数内没有obj =所以它不会被重新定义，也不需要返回声明。有没有简单的将JavaScript对象扩展到DOM的方法？

Answer 1

不，JavaScript对象不能像这样添加到文档中 - appendChild()方法期望使用某种类型的对象，通常使用document.createElement()方法创建。

因此，您必须每次创建新DOM元素或克隆现有元素。

假设你想要有一些“模板”元素，我建议使用全局变量来保存该元素，创建一次，然后每次克隆它，并把新的属性。

代码，这将是：

var _globalDOMobj = 0; 
function addToDOM(obj) { 
    temp = {}; 
    for (p in obj) { 
     temp[p] = obj[p]; 
    } 
    if (!_globalDOMobj) { 
     _globalDOMobj = document.createElement('prop'); 
     _globalDOMobj.className = "myprop"; 
    } 
    obj = _globalDOMobj.cloneNode(true); 
    obj.innerHTML = "I am dynamic element"; 
    document.body.appendChild(obj); 
    for (p in temp) { 
     obj.setAttribute(p, temp[p]); 
    } 
    return obj; 
} 

addToDOM({"var1": "123", "style": "color: red;"}); 
addToDOM({"var2": "789", "style": "color: blue;"}); 

正如你看到的，你可以直接传递对象的功能，无需首先分配给变量。

此外，要在DOM元素中应用对象属性，您必须使用setAttribute()，否则这些属性将不会成为DOM的一部分。

在上面的代码中，模板对于所有实例具有相同的类，因此您可以应用一些CSS来影响它们，例如，

.myprop { font-weight: bold; }​ 

​Live test case。

Answer 2

的“添加JS对象到DOM”真的没有任何意义，而事实上你的代码是不这样做，是创建一个新<prop>元素，并从你的对象分配给它的属性的概念。我没有看到这一点：您期望浏览器如何处理<prop>元素？

无论如何，继续关于如何不必从函数中返回一个对象并将其分配给您的变量的问题，您不能。 JavaScript通过值传递参数 - 在这种情况下，“值”是对对象的引用。您可以更改对象的属性，但不能将传入的变量指向某个其他对象。 （很显然你可以使声明的参数obj指向一些其他的对象，就像你在做什么。）

但是，这导致了可能的解决方法，可以帮助你：怎么样，而不是你一个简单的属性添加到现有的对象，用新的属性引用DOM对象 -

function addToDOM(obj) { 
    var temp = document.createElement('prop'); 
    document.body.appendChild(temp); 
    for (var p in obj) { 
     temp[p] = obj[p]; 
    } 
    obj.myDOMElement = temp; 
} 

var obj = {var1:123}; 
//No obj= 
addToDOM(obj); 
// obj now has a property myDOMElement that references the DOM element 

请注意，我有简化您的功能：您不需要将所有obj属性复制到temp，然后在将obj重新分配给新DOM元素后，将所有属性复制回obj。 （即使你决定留在当前代码的返回新对象的想法，你可以使用我的简化形式，只是return temp。）

而且请注意，你应该声明你的变量为var或他们将是全球性的。