How To Append (Or Other Method) a Lot of HTML Code

Question

I need to append a lot of HTML code. To improve readability, I don't want to write that all in one line, but split them as regular HTML. That would be like 15 new-lines or something. The problem is that JavaScript doesn't allow me to do that.

var target = $('.post .comment_this[rel="' + comment_id + '"]').parent().parent();

target.append('
    <div class="replies">
        <p>...</p>
        <img src="" alt="" />
    </div>
');

Basically, I need to add HTML in that place.

I need to add some variables too.

Answer 1

Creating multiline strings in JavaScript

Answer 2

If you want to insert variables to html, you can use some templating library like jQuery.template

Answer 3

    target.append(' <div class="replies">'+
            '<p>...</p>'+
            '<img src="" alt="" />'+
        '</div>'
    );

or

    target.append(' <div class="replies">\
            <p>...</p>\
            <img src="" alt="" />\
        </div>'
    );

Answer 4

target.append(' ?>
    <div class="replies">
        <p>...</p>
        <img src="" alt="" />
    </div>
<?');

Separate the html and php with the close/open php tags and it should work fine.. when adding var's in the html, just use the tags again, like this: <? $hello ?>

Answer 5

use html() instead of append

target.html('<div class="replies"><p>...</p><img src="" alt="" />,</div>');

Answer 6

As of 2015, ECMA 6, you can do this:

target.append(`
    <div class="replies">
        <p>...</p>
        <img src="" alt="" />
    </div>
`);