使用jQuery創建動態嵌套HTML標簽

Question

我有這樣的課

var htmlElements=function(){
    var __this=this;
    this.type=''; 
    this.parentDiv='';
    this.id='';
    this.draw=function(){
        if(__this.type=='div'){
            $('<div/>', {
                'id': __this.id,
            })
            .appendTo(__this.parentDiv);
        }
    }
}

從我的使用者類中，我創建此類填充屬性的對象，然后調用draw方法。 像這樣。 在dom中，我有一個id為staticDiv的div ，我沒有動態創建它

var htmlElementsobj=htmlElements();
htmlElements.type='div';
htmlElements.id='firstDiv';
htmlElements.parentDiv='#staticDiv'
htmlElements.draw();

到目前為止，它工作正常，但是當我嘗試在動態創建的div繪制另一個元素時，就像這樣

var htmlElementsobj=htmlElements();
    htmlElements.type='div';
    htmlElements.id='nestedDiv';
    htmlElements.parentDiv='#firstDiv'
    htmlElements.draw();

它沒有畫。 但是，如果我將其父屬性更改為staticDiv則可以正常工作。

Answer 1

當我認為您要引用htmlElementsobj時，您是將htmlElements稱為對象。 另外，您想調用new htmlElements()創建對象：

 var htmlElements=function(){ var __this = this; this.type = ''; this.parentDiv = ''; this.id = ''; this.draw = function(){ if(__this.type=='div'){ $('<div/>', { 'id': __this.id, }).text(__this.id). // for debugging / visualization appendTo(__this.parentDiv); } }; }; var htmlElementsobj = new htmlElements(); htmlElementsobj.type = 'div'; htmlElementsobj.id = 'firstDiv'; htmlElementsobj.parentDiv = '#staticDiv' htmlElementsobj.draw(); htmlElementsobj = new htmlElements(); htmlElementsobj.type = 'div'; htmlElementsobj.id = 'nestedDiv'; htmlElementsobj.parentDiv = '#firstDiv' htmlElementsobj.draw(); 

 div { border: 1px solid red; padding: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="staticDiv"></div>