Changing the content of HTML using jquery

Question

I have a html code as

<td id="myColumn" class="Column">
Old Data
</td>

Using a jquery I would like to change the "Old Data" to "My New Data". I try as

$( ".Column" ).append("My New Data");
and
$( ".Column" ).replaceWith("My New Data");

Answer 1

As Html:

$( ".Column" ).html("My <strong>New</strong> Data");

Outputs: 'my New Data'

---

As String:

$( ".Column" ).text("My <strong>New</strong> Data");

Outputs: 'my New Data'

---

If you want to replace something in current value, you can use .html() as getter:

$( ".Column" ).html(  $(".Column").html().replace('old', 'new')  );

---

And a plain Javascript method, all credit goes to: yantrakaar (placed it here for a more complete answer)

document.querySelector("#myColumn").innerHTML="My New Data"; // Modern browsers
document.getElementyId("myColumn").innerHTML="My New Data"; // Older browsers

Answer 2

Instead of .append or .replacewith please use .html.

ex: $( ".Column" ).html("My New Data");

Because .append() won't solve your problem, it is also used to append any text with the previous one. It never replaces the previous text.

Answer 3

use .html()

$( ".Column" ).html("My New Data");