Alexminator
New Member
I am creating a UI, in which user can add / delete items (of similar layout).It starts with one item and you can click 'add' to add more. The UI consists of several different types of items.What I am doing currently is populating a single item \[code\]item 1\[/code\] ( of each type ) and on \[code\]add\[/code\] event, I clone the \[code\]item 1\[/code\], replace the changes done by user in \[code\]item 1\[/code\] and append the clone to the \[code\]container\[/code\]. In simple words, instead of dynamically creating html with jQuery, I am cloning html of a \[code\]div\[/code\]. But in this approach , I had to change a lot of things to keep to give the new item to initial state.So, I want to avoid the replacing the edits done by user, so I was thinking something like below,\[code\]<script type="text/template" id="item_type1"> <div> <div>Box</div> </div></script><script type="text/template" id="item_type2"> <div> <div>Box2</div> </div></script>\[/code\]And on \[code\]add\[/code\] event, I want to do something like \[code\]$('#item_type1').html()\[/code\] and \[code\]$('#item_type2')\[/code\] to create new items. I know there are sophisticated libraries like handlebar and mustache and underscore has its own way of implementing templates.But I am not using any of these already and thus do not want to included them just to copy content. I dont want anything special. I am not passing variables. I am just cloning some markup to use again and again.Is this way to insert \[code\]html\[/code\] in \[code\]script\[/code\] tags , going to work in all browsers ? and is it a good way ?EDIT:Its for the wp plugin and I assume js is turned on , else the plugin wont work anyways.