Sometimes you need to add a complex structure or generated table to an element.

Writing is not always convenient:

$('#div_table').append('<table>'); $('#div_table').append('<tr>'); $('#div_table').append('<td>'); $('#div_table').append('12'); $('#div_table').append('</td>'); $('#div_table').append('<td>'); $('#div_table').append('13'); $('#div_table').append('</td>'); $('#div_table').append('</tr>'); $('#div_table').append('</table>'); 

If you write within the same append line, it becomes unreadable. Write in this form JS does not seem to allow:

 $('#div_table').append('<table> <tr> <td>12</td> <td>13</td> </tr> </table>'); 

Tell me how to cope with this matter? I am writing in SublimeText2.

    2 answers 2

     $('#div_table').append('<table>'+ '<tr>'+ '<td>12</td>'+ '<td>13</td>'+ '</tr>'+ '</table>'); $('#div_table').append('<table>\ <tr>\ <td>12</td>\ <td>13</td>\ </tr>\ </table>'); 

    That's how:

     $('#div_table').append('<table>'); $('#div_table').append('<tr>'); $('#div_table').append('<td>'); $('#div_table').append('12'); $('#div_table').append('</td>'); $('#div_table').append('<td>'); $('#div_table').append('13'); $('#div_table').append('</td>'); $('#div_table').append('</tr>'); $('#div_table').append('</table>'); 

    Never write like this :-) Imagine that you need to transport cargo through the portal. Which is better: open and ship the whole load once, or open it 25 times and carry the load in parts? And the opening of the portal eats a lot of energy :-)

    • Thank you, I will learn the syntax) - Viacheslav Soldatov
    • one
      @ Little fox put a finger up! I want to get even with someone. - lampa

    I will offer my version, as I usually do. http://jsfiddle.net/GSKn8/ Perhaps this option is inferior in performance to pure HTML. But using this approach, you can easily hang events on the created elements and define HTML attributes more beautifully. Plus this code is easier to maintain.