使用jQuery替换HTML中的元素中的文本与另一个元素（表）

Question

I want to replace a particular text in an HTML with another text from another element, which in this case is a table data.().

Here is my table:

<table id="hftable">
        <tr>
            <td id="hfpn1">V.Sehwag</td>
            <td id="hfp1">DNB</td>
            <td id="hfp1b">.-.-..-.</td>
        </tr>
        <tr>
            <td id="hfpn2">G.Gambhir</td>
            <td id="hfp2">DNB</td>
            <td id="hfp2b">.-.-..-.</td>
        </tr>
        <tr>
            <td id="hfpn3">A.Arora</td>
            <td id="hfp3">DNB</td>
            <td id="hfp3b">.-.-..-.</td>
        </tr>
    </table>

where batsman1 is the id of the element where the replacement is to take place or more specifically the table looks like:

 <table id="current">
        <tr>
            <td id="batsman1">Batsman 1</td>
            <td id="currentbat1"></td>
         </tr>
        <tr>
            <td id="batsman2">Batsman 2</td>
            <td id="currentbat2"></td>
        </tr>
        <tr>
            <td>Bowler</td>
            <td></td>
        </tr>
    </table>

I want to replace Batsman 1 (in the table with id="current") with V.Sehwag (in the table with id="hftable") (when someone clicks on a specific button on the page)

I have tried:

 $("#batsman1").text($("#hfpn1").val());

This isn't working. Apart of showing "V.Sehwag" in place of "Batsman 1", it is showing me a blank space.

Any ideas where I am wrong? What is the correct and easy way to do this? Thank You.

Answer 1

The TD element does not have a value, it has text. Modify your code as follows:

 $("#batsman1").text($("#hfpn1").text());

Here's the jsFiddle

Answer 2

Try to use .text() in this context, You are invoking .val() function over a non-input element, obviously it wont work. And do remember that, .val() only works on input elements on which user can input something via the UI.

$("#batsman1").text($("#hfpn1").text());

Answer 3

使用下面的内容，我希望这可以帮助您解决问题。

$("#batsman1").html($("#hfpn1").text());