不能更新元素的HTML

Question

我動態創建一個元素：

$('.dataTables_paginate li.previous').after('<li class="info" />'); 

，然後我試圖更新其HTML：

console.log(pre); // <b>1 - 20</b> of <b>1,447 entries</b> 
if ($('.dataTables_paginate li.info')) { 
    console.log('element exists'); // element exists 
    $('.dataTables_paginate li.info').html(pre); 
} 

日誌正確打印​​的一切，但我不能確定爲什麼該元素的HTML不改變，它保持爲空（<li class="info"></li>）。我究竟做錯了什麼？

Answer 1

要檢查的元素存在，你必須把它放在這樣

if($(elem).length){ 
    //some code 
} 

你的代碼的工作，但是你可以把它放在這樣

$(function(){ 
 
    var pre = "<b>1 - 20</b> of <b>1,447 entries</b>"; 
 
    var $info = $("<li>").html(pre); 
 
    $('.dataTables_paginate li.previous').after($info); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dataTables_paginate"> 
 
    <li class="previous"></li> 
 
</ul>

Answer 2

jQuery的文檔聲明.html（字符串s），需要字符串作爲參數。

要麼設置你的變量字符串變量，就像這樣：

var pre = "<some html tag>" 

還是在傳遞字符串變量作爲參數：

.html("<pre>")