使用面向對象創建新元素javascript

我正在學習如何編寫面向對象的JavaScript。我有一個簡單的類來創建div元素，但是當我測試代碼時，沒有創建新元素。我是否正確地做這件事？我正在使用以下代碼：使用面向對象創建新元素javascript

function elementCreation(elementParent, elementId, elementText) { 
    this.elementParent = document.getElementsByTagName(elementParent)[0]; 
    this.elementId = elementId; 
    this.elementHtml = elementText; 
    this.elementMake = function (type) { 
     newElement = document.createElement(type); 
     // add new element to the dom 
     this.elementParent.appendChild(newElement); 
    }; 
} 

var newObject = new elementCreation('body', 'testdiv', 'some text here!!!'); 
newObject.elementMake('div');

來源

2013-01-03 Mr. 1.0

您的代碼完美工作，恭喜。

你根本看不到沒有造型的空白div。

見here a demonstration with styling：

div { 
width:100px; 
height:100px; 
background-color:red; 
}

請注意，如果您的施工參數，供子元素的建築，你必須把他們的一些使用。例如：

function elementCreation(elementParent, elementId, elementText) { 
    this.elementParent = document.getElementsByTagName(elementParent)[0]; 
    this.elementId = elementId; 
    this.elementHtml = elementText; 
    this.elementMake = function (type) { 
     newElement = document.createElement(type); 
     // add new element to the dom 
     this.elementParent.appendChild(newElement); 
     newElement.innerHTML = elementText; 
    }; 
}

Demonstration

我不會嘗試使用elementId參數：如果你定義一個函數，它可能是把它不止一次和ID不能使用超過一次在HTML中。

來源

2013-01-03 15:42:43

哦好吧我現在看到它創建了div，但我如何應用id和文本？ ''testdiv'，'一些文字在這裏!!!''確實顯示。 –

我認爲OP期待/希望提供的文本在DIV中呈現（這裏的一些文本!!!） –

代碼不能很好地工作，因爲它沒有設置元素HTML或ID。 – MrCode

div正在創建中，但您並未將其內容設置爲第三個參數elementText。

newElement = document.createElement(type); 
    newElement.innerHTML = this.elementHtml; // <-- set its content 
    newElement.id = this.elementId; // <-- set the ID 
    // add new element to the dom 
    this.elementParent.appendChild(newElement);

來源

2013-01-03 15:46:21 MrCode

在設置文本內容時添加了與firefox的兼容性，然後將id屬性關聯到新元素。我也嘗試了另一種更容易複雜化的方法。

什麼：

function elementCreation(args) { 
    this.parent = args.parent; 
    this.id = args.id; 
    this.text = args.text; 

    this.make = function(type) { 
     var el = document.createElement(type); 
     el.id = this.id; 

     // firefox do not support innerText, some others do not support textContent 
     if (typeof el.innerText != "undefined") { 
      el.innerText = this.text; 
     } else { 
      el.textContent = this.text; 
     } 

     this.parent.appendChild(el); 
    } 
} 

new elementCreation({ 
    parent: document.body, 
    id: 'div1', 
    text: 'some text here!!!' 
}).make('div');

，您可以嘗試with this jsfiddle。

來源

2013-01-03 16:16:39

使用面向對象創建新元素javascript

回答

相關問題