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.

Kanishka Panamaldeniya · Accepted Answer · 2011-07-01T09:39:48.967

11

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

or

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

edited Jul 01 '11 at 09:39

answered Jul 01 '11 at 09:31

Kanishka Panamaldeniya

17,302
31
123
193

score 2 · Answer 2 · edited May 23 '17 at 12:16

2

Creating multiline strings in JavaScript

edited May 23 '17 at 12:16

Community

1
1

answered Jul 01 '11 at 09:19

jcomeau_ictx

37,688
6
92
107

I wrap each new line into `'quotes'` and added `+` before them. It works and looks a little bit better then when it was all in one line. – daGrevis Jul 01 '11 at 09:25

score 1 · Answer 3 · answered Jul 01 '11 at 09:19

1

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 ?>

answered Jul 01 '11 at 09:19

Patrick R

1,949
3
32
58

1

OP makes no mention of PHP. – Archonic Apr 29 '15 at 05:51
Nope OP didn't, and apparently I'm to retarded to read what OP actually wanted and used. NO idea why i assumed OP used php? I take the bullet on that :-) – Patrick R Apr 29 '15 at 07:57

score 0 · Answer 4 · answered Jun 02 '15 at 19:22

0

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

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

answered Jun 02 '15 at 19:22

Jonathan

6,741
7
52
69

score 0 · Answer 5 · answered Jul 01 '11 at 09:25

0

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

answered Jul 01 '11 at 09:25

MarrLiss

808
5
10

user555600 · Answer 6 · 2011-07-01T09:30:04.553

-1

use html() instead of append

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

edited Jul 01 '11 at 09:30

answered Jul 01 '11 at 09:18

user555600

164
1
4
11

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

6 Answers6

Linked