JSFiddle - React, Tailwind, and code Playground

by Ali Soltani

HTML

<input id="new1" type="button" value="new (method1)" />
<input id="new2" type="button" value="new (method2)" />
<input id="new3" type="button" value="new (method3)" />

JavaScript

function elementClass(htmlType, cssClass, text, value, id) {
    this.htmlType = htmlType;
    this.cssClass = cssClass;
    this.text = text;
    this.value = value;
    this.id = id;
}

function showElement(element) {
    var message = "";
    for (key in element) {
        message = message + 'key: ' + key + '   ' + 'value: ' + element[key] + '\n';
    }
    alert(message);
}

$('#new1').click(function() {
    var newElement1 = new elementClass(htmlType ="div",cssClass = "form-group",id = "div1");
    showElement(newElement1);    
});

$('#new2').click(function() {
    var newElement2 = new elementClass("div", "form-group", "undefind", "undefind", "div1");
    showElement(newElement2);    
});

$('#new3').click(function() {
    var newElement3 = new elementClass();
    newElement3.htmlType = "div";
    newElement3.cssClass = "form-group";
    newElement3.id = "div1";    
    showElement(newElement3);    
});