https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_after2
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function afterText() {
$("#tblGrid").html("<td>NameName2</td><td>Budget Value 2</td></tr><tr><td>NameName3</td><td>Budget Value 3</td>");
}
</script>
</head>
<body>
<table>
<tbody>
<th><h4>Name Heading</h4></th>
<th>
<table>
<thead>
<tr>
<th>Budget Heading</th>
</tr>
</thead>
</table>
</th>
<tr id="tblGrid"></tr>
<tr><td>NameName1</td><td>Budget Value 1</td></tr>
</tbody>
</table>
<button onclick="afterText()">Button</button>
</body>
</html>
OUTPUT is something like this after clicking button:
Name Heading Budget Heading
NameName3 Budget Value 3
NameName1 Budget Value 1
Button
Could you help in understanding where is value with number "2" is going?
Output expected:
Name Heading Budget Heading
NameName2 Budget Value 2
NameName3 Budget Value 3
NameName1 Budget Value 1
Button
Also every time we click button, it should not append 2 and 3, but clear old iteration values. Suggestions please!
question from:
https://stackoverflow.com/questions/65836026/jquery-html-or-after-or-append-with-html-table-tag 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
