I’m trying to append a multilined HTML code to a div using jquery, but it keeps giving me error “Unexpected token ILLEGAL”
Here is a line I’m trying to append:
$('.irbiswindow').append('<table class="ts"><tr><th class="ts-yw4l" rowspan="3"><img src="img/previews/3_1_1.jpg" class="previewing">
<img src="img/previews/3_1_2.jpg" class="previewing"><img src="img/previews/3_1_3.jpg" class="previewing"><img src="img/previews/3_1_4.jpg" class="previewing"><img src="img/previews/3_1_5.jpg" class="previewing"></th>
<th class="ts-yw4l"><p class="comment">Rare and gorgeous "irbis" snow leopards observe the surroundings ready to hunt.</p><p class="comment">3Ds Max, Photoshop, Vray, Zbrush</p></th></tr><tr><td class="ts-yw4l"></td></tr><tr>
<td class="ts-yw4l"></td></tr></table>');
4
Answers
Try to do a multiline concatenation with this trick
'text'+ newline 'text'
You could store the html in a js variable as such:
Far better to put your static HTML in actual HTML and then clone the content to append it:
By default, the HTML code containing line-breaks cannot be used with
append/prepend
directly. But fortunately, currently there are following effective methods:Use “+” to join HTML code pieces.
Use “” to escape.
Use “`” (back-tick, grave accent), do not need any extra operations.
This method is supported from ES2015/ES6 (Template literals).
Add a hidden
tag
containing the same HTML code you need, e.g.<p id="foo" style="display:none;">
, then use.append($('#foo').html());
.Now post some use scenarios to the
![enter image description here](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
first three methods
metioned above (just run them in the console ofChrome
browser.):We can see their differences clearly.