如何在JavaScript字符串之间附加内容？

Question

I have a HTML structure like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id ="x">
  <tr>
    <td class='col1'>
      Hello <span class='name'></span> How are u ?
    <td>
  </tr>
</table>

And here is my jQuery code:

var variable = $('table#x').find(".col1").html().find("span.name").append(' Jack..!').replace('u', 'you');
alert(variable);

Now, I want this output:

<td class='col1'>Hello <span class='name'>Jack..!</span> How are you ?<td>

How can I do that?

Answer 1

You already have a class you can target, 'name'. You can simply add the text to this:

$('.name').text('Jack..!')

https://jsfiddle.net/2j7rxwyj/

Answer 2

Based on my comment , you could use the following:

Updated Example

$('table#x .col1 span.name').append(' Jack..!').parent().text(function () {
  return $(this).text().replace('u', 'you');
});

There were a couple issues in your code. For one, you can't chain .append() after the .html() method. In addition, the .replace() method wasn't changing the text. To fix this, you could pass an anonymous function to the .text() method and return the replaced text.