# Best practice of HTML DOM template in javascript

Of course the when this select is comes with less options it will be better to leave it like this, and when it comes more then this it better to make it via loop. The question is that if I should make it loop or leave it as it is ? which way is the best and why ?

var htmlTemplate =
"<select class='action cycle' auto='1' value='24'>" +
"<option value='6'>6 hours</option>" +
"<option value='12'>12 hours</option>" +
"<option value='24' selected=''>24 hours</option>" +
"<option value='48'>48 hours</option>" +
"<option value='72'>72 hours</option>" +
"</select>";


Also, in my current project I'm making 'Add' button which creates some html dom elements. My question is if I should leave the code inside string or create it via javascript (createElement) and again, I would like to know what is the best way and why :)

var htmlTemplate = "class='target-unit' identify='blahblah'";
htmlTemplate = "<div " + targetTemplate + ">" +
"<span class='target-place'>" + targetPlace + "</span>" +
"<select class='action campaign'>" + targetOptions + "</select>" +
"<label input-label='' class='target-limit'>5000</label>" +
"<select class='action cycle' auto='1' value='24'>" +
"<option value='6'>6 hours</option>" +
"<option value='12'>12 hours</option>" +
"<option value='24' selected=''>24 hours</option>" +
"<option value='48'>48 hours</option>" +
"<option value='72'>72 hours</option>" +
"</select>" +
"<button class='action small button-icon add flr no-title' identify='target-add'></button>" +
"</div>";

• Why the downvote? I could see this question being split into two questions, but I don't think this necessitates a downvote, especially without explanation. – Greg Burghardt Nov 25 '14 at 18:20
• @GregBurghardt Not sure who downvoted, but my first reaction to this question was: There's nothing to review here. The Question doesn't seem to ask for a review of implementation as much as it asks for someone to decide between two alternatives. For a complete "review", there would likely need to be more code and / or more context. Just an observation. A question like this would potentially be on topic on SO, but on SO the answers to: which is better / faster, are already there. – xDaevax Nov 25 '14 at 18:55

## 1 Answer

Personally I would create loops for this, it's very unreadable at the moment and you are repeating yourself a lot. Remember the DRY rule (don't repeat yourself). Also if you do it via loops it's easier to maintain and change in the future.

• Thanks, and what do you think about the second question .. ? when I put the all html elements .. it is better to use string to create those elements ? or via createElement ? – Ido Nov 25 '14 at 18:02
• CreateElement for sure. Because if you save createElement in a variabel you can just re-use it over and over. – Chrillewoodz Nov 25 '14 at 18:25
• and let's say I won't re-use it ? and createElement will make more code then it is now ? createElement will be still better ? – Ido Nov 25 '14 at 18:27
• @Chrillewoodz: Reusing the value returned from document.createElement means you are using the same exact <select> object on the page each time you want this dropdown. What if the OP wants multiple dropdowns on this page? Reusing the createElement return value is not correct in this scenario. – Greg Burghardt Nov 25 '14 at 18:49