jquery .html() is not replacing the innerhtml

Question

I have a function that builds a string of html, then uses the jquery.html() method to insert that string of html. I would expect the result for the page to show just the output text, but instead everything is displayed, even the tags.

function updateTableCell(){
   var removeDocForm = "<form action='"+docRemoveTarget+"'><a>remove</a></form><br>"
   $('table tr').eq(docRowCount).find('td').eq(4).html(removeDocForm);
}

I would expect just remove would show up when I render the page, but instead I see

<form action='docRemoveTarget'><a>remove</a></form><br>

What you have should work. Can you post a http://jsfiddle.net which shows the problem. — Rory McCrossan, Jan 09 '13 at 08:39
@ShivanRaptor What do you mean ? What should be changed and why ? — Denys Séguret, Jan 09 '13 at 08:40
You are missing a `;` after your first line, could that be it? — Peter, Jan 09 '13 at 08:41
@ShivanRaptor That's bollocks and just a matter of preference. Both ways are valid. See [w3schools.com](http://www.w3schools.com/xml/xml_attributes.asp) (chapter: XML Attributes Must be Quoted) and the [W3 HTML5 reference](http://dev.w3.org/html5/html-author/#attributes). — Oldskool, Jan 09 '13 at 08:41
If you want to insert content at 4th cell of a row, you can use this `$('table tr td:nth-child(4)').html(removeDocForm);` — Hary, Jan 09 '13 at 08:44
@Oldskool yes, both single & double quotes are valid. But for most scripts in the Internet, they use double quotes. Let's use double quotes in HTML wherever possible! — Raptor, Jan 09 '13 at 08:45
try code its already working...i have tested it and only remove is appear in but as aspected html is replaced..what else you want — Dipesh Parmar, Jan 09 '13 at 08:46
@Oldskool extended readings: http://stackoverflow.com/q/273354/188331 — Raptor, Jan 09 '13 at 08:49
@Oldskool w3schools is known to be inaccurate. [w3fools](http://w3fools.com). the technical report for html 5 has an unquoted attribute syntax defined http://www.w3.org/TR/html5/syntax.html#attributes-0 — Zack, Jan 09 '13 at 08:53
@ShivanRaptor - On what do you base your statement "most scripts in the internet, they use double-quotes"? Has somebody double-checked every page on the net and confirmed that more that half use double quotes? The answers for the question you linked to support Oldskool's view that single quotes are fine. Which they are. — nnnnnn, Jan 09 '13 at 08:53
@nnnnnn i just posted the SO question for extended information in other views. Do you find a lot of scripts / HTML codes using single quotes? I doubt. — Raptor, Jan 09 '13 at 09:29

Dipesh Parmar · Accepted Answer · 2013-01-09T08:55:07.910

I have made some changes in your code and tested its worked. Code is as below.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function updateTableCell()
{
    var docRemoveTarget = "localhost.php"
    var removeDocForm = "<form action='"+docRemoveTarget+"'><a>remove</a></form><br>";
    $('table tr').eq(0).find('td').eq(4).html(removeDocForm);
    console.log($('table tr').eq(0));
}
$(document).ready(function(){
    updateTableCell();
});
</script>
<table width="100%" border="1">
    <tr height="30">
        <td style="border:1px solid #CCC;"> </td>
        <td style="border:1px solid #CCC;"> </td>
        <td style="border:1px solid #CCC;"> </td>
        <td style="border:1px solid #CCC;"> </td>
        <td style="border:1px solid #CCC;"> </td>
        <td style="border:1px solid #CCC;"> </td>
    </tr>
</table>

may be you are selecting dom that actually not there because in eq index start from 0 and you might accessing or getting dom that are not there.. — Dipesh Parmar, Jan 09 '13 at 08:51

jquery .html() is not replacing the innerhtml

1 Answers1