无法追加到节点

时间:2018-09-05 20:48:48

标签: javascript jquery

我在表中有以下html代码:

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

当我单击按钮时,我想清空td并添加存储在cookie中的文本。 Td可以清空,但是我无法追加文本。文本在变量中,因为在警报中可见。我已经使用下面的代码来尝试实现这一点,注释掉的代码是我尝试过的并且不起作用。

$(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);
})

任何人都可以帮助我解决此问题,或推荐一种更好的方法吗?

3 个答案:

答案 0 :(得分:1)

$(this).closest('td').append(olddesc);在您从td中删除this之后 运行,因此td不再是this的祖先。您不需要清空td。只需将其文本设置为olddesc,它就会在设置文本过程中自动清空。

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

答案 1 :(得分:0)

您可以使用.html()将动态数据添加到HTML标签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);

这将为您工作。

答案 2 :(得分:-1)

只需使用.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>