Photoshop Question posted in
The official user guide can be found here.

can't append multiline html with jquery – Photoshop

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>');
Tags:

4

Answers


  1. 0

    Try to do a multiline concatenation with this trick 'text'+ newline 'text'

    $('.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>');
    Login or Signup to reply.
  2. 0

    You could store the html in a js variable as such:

    var html;
html += '<table class="ts">';
html += '    <tr>';
html += '      <td>';
...
html += '      </td>';
html += '    </tr>';
html += '</table>';

$('.screencontainer').delay(0).animate({height:"2560px",width:"1000px"},0, function(){$('.irbiswindow').append(html)});
    Login or Signup to reply.
  3. 0

    Far better to put your static HTML in actual HTML and then clone the content to append it:

    $('.irbiswindow').append( $("#tableToClone").clone() );
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="irbiswindow">
            
</div>

<div style="display:none">
  <table id="tableToClone" 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>
</div>
    Login or Signup to reply.
  4. 0

    By default, the HTML code containing line-breaks cannot be used with append/prependdirectly. But fortunately, currently there are following effective methods:

    1. Use “+” to join HTML code pieces.

    2. Use “” to escape.

    3. Use “`” (back-tick, grave accent), do not need any extra operations.
      This method is supported from ES2015/ES6 (Template literals).

    4. 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 first three methods metioned above (just run them in the console of Chrome browser.):
      enter image description here

    We can see their differences clearly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search