在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或他們將是全球性的。