I have a form created via javascript that will be set as the content of a modal widget provided by Alloy UI. However I don't feel I am approaching this the right way. This question applies for javascript-created HTML in general.
I realize I should avoid using global variables for the sake of namespace and collision, so maybe someone can help me out. I declare the global var myForm
and initialize it with some HTML elements to create a form:
var myForm = '<form id="my-form" method="get">
<div>
<select>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
</form>'
And a modal widget that sets myForm
as the body content:
var modal = new Y.Modal(
{
bodyContent: myForm,
centered: true,
modal: true,
resizable: false,
draggable: false,
width: 350
}).render();
This seems like a not-so-great way of using Javascript to render HTML, especially for my project since I will have many html elements created via javascript (<img>
's, <ul>
's etc), so I don't want to get into a bad coding habit. Is there a more standard or acceptable way to dynamically render HTML (not speaking from a templating perspective, i.e., Thymeleaf, etc)? Thanks all