CODEWITHSUNDEEP
javascriptjquery
Bshaw
Bshaw

Reputation: 43

Cannot append to node

I have a the following html code in a table:

<td id="description">
    <input id="newdescripion" value="VOIP/DATA" type="text">
    <button type="button" id="removeinput">Remove</button>
</td>

When I click the button, I would like to empty the td and add the text which is stored in a cookie. The td empties fine but I am unable to append the text. The text is in the variable as it is visible in the alert. I have used the code below to try and achive this, the commented out code is what I have tried and doesn't work.

$(document).on('click', '#removeinput', function() {
    var hostname =  $('#hostname').text();
    //alert(hostname);
    var trid = $(this).closest('tr').attr('id');
    //alert(trid);
    var olddesc = Cookies.get(hostname+','+trid+',description');
    alert(olddesc);
    $(this).closest('td').empty(); <----- THIS WORKS
    $(this).closest('td').append(olddesc);
    // $(this).closest('tr').find('#description').text(olddesc);
    // $(this).closest('td').text(olddesc);
    // $('#'+trid+' td').each(function(){
    //     if($(this).attr('id') == 'description'){
    //         $(this).append(olddesc);
    //     }
    // })
    //$(document).find('#'+trid+' td#description').append(olddesc);
})

Can anyone please help me fix this or recommend a better way of doing it?

Upvotes: 1

Views: 144

Answers (3)

Kevin B
Kevin B

Reputation: 95023

$(this).closest('td').append(olddesc); runs after you've removed this from the td, therefore the td is no longer an ancestor of this. You do not need to empty the td; simply set its text to olddesc and it will be automagically emptied as part of the process of setting its text.

// (REMOVE THIS) $(this).closest('td').empty(); <----- THIS WORKS 
$(this).closest('td').text(olddesc);

Upvotes: 0

NAVIN
NAVIN

Reputation: 3317

You can use .html() to add your dynamic data to HTML tag id 

 var olddesc = Cookies.get(hostname+','+trid+',description');
 alert(olddesc);

 // Create custom / dynamic HTML
 var temp = `<p>` + olddesc + `</p>`;

 $(this).closest('td').empty(); <----- THIS WORKS

 // Edit: Use ID of html tag
 $('#description').html(temp);

This shall work for you.

Upvotes: 3

J&#233;r&#244;me Teisseire
J&#233;r&#244;me Teisseire

Reputation: 1548

Just use .html

    $(document).on('click', '#removeinput', function() {
        var hostname =  $('#hostname').text();
        var olddesc = "Cokkies return"; //Cookies.get(hostname+','+trid+',description');
        $(this).closest('td').html(olddesc); //<----- THIS WORKS
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
<table>
<tr>
    <td id="description">
        <input id="newdescripion" value="VOIP/DATA" type="text">
        <button type="button" id="removeinput">Remove</button>
    </td>
</tr>
</table>

Upvotes: 0

Related Questions