I'm working on a form that auto-generates a large addition when the user specifies, including a editable canvas, selectable inputs, textareas and so on. I'm wondering if there's a tool for appending large blocks of HTML more easily and with better style: for instance, in my codeigniter PHP views it's easily done just by closing the PHP tag and referencing variables using <?=var?>
.
<?php if (condition) {?>
<h1>List a variable <?=$var?></h1>
<?php }?>
Is the above terrible style? Is there a comparable tool to use for javascript so I can include html with proper indentation?
EDIT: To be clearer, I'm not looking for a lot of input on the php - my objective is to make editing the HTML I'm inserting with javascript cleaner. The problem is analogous to this:
<?php
if (condition) {
echo "<div>";
echo "<p> a line of html code<p>";
echo "<h1> more stuff and a ".$variable;
echo "<div>";
}
?>
//vs
<?php
if (condition) { ?>
<div>
<p> A line of html code, but easier to edit</p>
<h1> a <?=$var?>
</div>
<? } ?>
The second one is cleaner and easier to edit for the developer. So I'd like to do the same with javascript and take this:
$(this).append('<p>a whole bunch of stuff'+var+'more stuff<p>');
$(this).append('<p>more stuff<p>');
$(this).append('<h1>more stuff<h1>');
And make it easier to manage.
Try CoffeeScript. It adds some features to normal javascript like string interpolation, block strings and stuff that makes writing huge blocks of HTML string literals a piece of cake.