Adding large quantities of HTML with Jquery/javascript

Question

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.

Answer 1

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.