將JavaScript對象添加到DOM中

Question

我正在尋找一種方法來向DOM添加javascript對象而無需重新定義對象。

我創建了一個函數，將所有對象方法放入一個新對象，將對象重新定義為一個新的DOM元素，然后將所有對象放回到它上面，但這並不是我想要的。 我需要在不使用任何return語句的情況下更新對象。

我在這里有一個例子： 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 = ，因此它永遠不會重新定義，也不需要return語句。 有沒有辦法簡單地將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; }​

現場測試案例 。

Answer 2

“向DOM添加JS對象”的概念實際上沒有任何意義，實際上您的代碼沒有這樣做，它正在創建一個新的<prop>元素並從您的對象中為其分配屬性。 我沒有看到這一點：你期望瀏覽<prop>元素做什么？

無論如何，繼續討論如何不從函數返回對象並將其分配回變量的問題，你不能。 JavaScript按值傳遞參數 - 在這種情況下，“value”是對對象的引用。 您可以更改對象的屬性，但不能使傳遞的變量指向其他對象。 （顯然，您可以將聲明的參數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重新分配后obj新的DOM元素。 （即使您決定繼續使用當前代碼返回新對象的想法，您也可以使用我的簡化形式並return temp 。）

請注意，您應該使用var聲明變量，否則它們將是全局變量。