jquery adding table row with commented out html

Question

I have a table and I want to add a new row to this table. I load html of the row from the server. Returned html has some other commented out html on the top. Because of that comment adding row doesn't work properly. jQuery removes <tr> and <td> tags and adds plain text from <td> elements. Is it a bug or expected behaviour?

<table id="tbl">
    <tr><td>old1</td></tr>
    <!-- <abc -->
    <tr><td>old2</td></tr>
</table>
<input id="add" type="button" value="add"/>

JavaScript:

$("#add").click(function() {
    $("#tbl tr:last").after("<!-- <abc --><tr><td>New</td></tr>");  
});

fiddle

P.S. The issue is because of '<' in the comment. It works ok with normal comments. And it would also work with '<' if the comment was inserted into/from div elements rather than table/tr. What would be your suggestion to fix this issue without removing comment from the html on server-side.

Is the offending < in the comment always in the same position in the returned data? — steve
– steve, Commented Nov 30, 2013 at 22:51
in theory it is but I use that html on the server side as a template so I wouldn't want that modifying the template (moving the comment) affected the behaviour. — jonasnas
– jonasnas, Commented Nov 30, 2013 at 22:54

Daniel · Accepted Answer · 2013-11-30 23:04:09Z

1

You can simply remove comments by using regular expressions. Code(Demo on JSFiddle):

$("#add").click(function() {
    var rawHTML = "<!-- <abc --><tr><td>New</td></tr>";
    var HTMLToAdd = rawHTML.replace(/<!--[\s\S]*?-->/g, '');
    $("#tbl tr:last").after(HTMLToAdd);  
});

Shorter version:

$("#add").click(function() {
    $("#tbl tr:last").after("<!-- <abc --><tr><td>New</td></tr>".replace(/<!--[\s\S]*?-->/g, ''));  
});

answered Nov 30, 2013 at 23:04

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

steve · Accepted Answer · 2013-11-30 23:00:00Z

1

Referring to my comment above - e.g. the below JS works...

$("#add").click(function() {
    newRow = '<!-- <abc --><tr><td>New</td></tr>';
    var newRow = newRow.replace('<!-- <', '<!-- ');
    $("#tbl tr:last").after(newRow);    
});

where the newRow is actually the data returned by your server call.

answered Nov 30, 2013 at 23:00

steve

2,5191 gold badge23 silver badges30 bronze badges

1 Comment

jonasnas Over a year ago

It would work but my UI could break after the server side modifications even if server produces valid html

Nosferato · Accepted Answer · 2013-11-30 23:08:20Z

0

if you get always string like that and you don't want to have comment at all, you can strip it off

$("#add").click(function() {
    var responseString = "<!-- <abc --><tr><td>New</td></tr>";
    var index = responseString.indexOf("-->")+3;
    var formatedString = responseString.slice(index);
    $("#tbl tr:last").after(formatedString);  
});

answered Nov 30, 2013 at 23:08

Nosferato

1

Collectives™ on Stack Overflow

jquery adding table row with commented out html

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related