jQueryを使用してSPAN要素の後に値を設定する

Question

</span>の後にAJAXデータを挿入するにはどうすればよいですか？

$(function() { 
    function check_messages() { 
    $.ajax({ 
     url: '/check/', 
     cache: false, 
     success: function (data) { 
     $('.here').text(data) 
     complete: function() { 
      window.setTimeout(check_messages, 20000); 
     } 
    }); 
    }; 
    check_messages(); 
}); 

<button type="button" class="navbar-toggle collapsed msg" data-toggle="collapse" data-target="#search"> 
    <span class="glyphicon glyphicon-envelope here" aria-hidden="true"></span> 
    HERE ajax data 
</button> 

Answer 1

実際にあなたのスニペットはバギーでした。たとえば、completeコールバックがsuccessコールバックの内側にあった場合や、一番外側の関数が読んでいる方法によって閉じられなかったと言うことができます。

$(function() { 
    function check_messages() { 
     $.ajax({ 
      url: '/check/', 
      cache: false, 
      success: function (data) { 
       // instead of $('.here').text(data) 
       $('.here').after(data) 
      }, 
      complete: function() { 
       window.setTimeout(check_messages, 20000); 
      } 
     }); 
    }; 
    check_messages(); 
}); 

---

EDIT：

ここでは、右のあなたが好きなDOM要素の後にデータを追加するjQuery after() method含む消毒バージョンで行く。

$(function() { 
    var $CheckMessages = $('<span/>').insertAfter('.here'); 
    function check_messages() { 
     $.ajax({ 
      url: '/check/', 
      cache: false, 
      success: function (data) { 
       $CheckMessages.html(data); 
       // if data is text only (no HTML) it would be more secure to use .text() method... 
       // $CheckMessages.text(data); 
      }, 
      complete: function() { 
       window.setTimeout(check_messages, 20000); 
      } 
     }); 
    }; 
    check_messages(); 
});