CODEWITHSUNDEEP
javascriptjquery
Amit Sharma
Amit Sharma

Reputation: 1210

Select between creating DOM elements or using HTML in javascript for generating controls

I am building a dynamic page, on which controls are generated on the basis of what inputs are. So planing to create HTML controls using javascript.

I am concerned if i should use DOM elements or direct HTML as string.

Using DOM elements.

var div = document.createElement("div");
div.setAttribute("class","outer-div");
var input = document.createElement("input");
input.setAttriute("id","1234");
input.setAttriute("value","xyz");
div.appendChild(input);
document.body.appendChild(div);

Using HTML String

var html = "<div class='outer-div'><input id='1234' value='xyz' /></div>";
$("body").html(html);

Please suggest to choose from both.

Upvotes: 2

Views: 113

Answers (1)

Kiruse
Kiruse

Reputation: 1733

I personally prefer to create DOM elements with jQuery like this:

var $input = $('<input>')
    .attr("id", "1234")
    .val("xyz");

var $div = $('<div>')
    .addClass('outer-div')
    .append($input)
    .appendTo(document.body);

Or use one or more DOM templates and insert/remove your customizations where necessary. However, I think this question will rather result in biased answers and debates...

Upvotes: 1

Related Questions