如何使用相同的按鈕一個接一個地調用兩個函數？

Question

這裏就是我想：

$(document).ready(function() { 
    $("button").click(function() { 
     $("#div1").remove(); 
    }); // Missing function end 
}); 

$("#div1").("<b>Appended text</b>"); 
}); 

HTML

<div id="div1" style="border:1px solid black;background-color:gray;"> 
    <p>This is a paragraph in the div.</p> 
    <p>This is another paragraph in the div.</p> 

</div> 
    <button id="btn1">Remove div element</button> 

我怎樣才能做到這一點使用jQuery？

Answer 1

Javascript函數按照您將它們放入事件處理程序中的代碼的順序調用，因此您可以在調用.append()添加新文本之前調用.empty()，然後您可以將這兩個命令依次鏈接起來，以便您不必重新評估選擇：

<script> 
$(document).ready(function() { 
    $("button").click(function() { 
     $("#div1").empty().append("<b>Appended text</b>"); 
    }); 
}); 
</script> 

或者，你可以只分配HTML和跳過.remove()這將替換所有HTML中像這樣的元素：

<script> 
$(document).ready(function() { 
    $("button").click(function() { 
     $("#div1").html("<b>Appended text</b>"); 
    }); 
}); 
</script> 

注意：.remove()刪除包含元素及其所有內容，它看起來不像是你想要做的。如果您只想清除元素內容，則可以使用.empty()。但是，在這種情況下，僅使用.html()分配替換以前內容的新內容會更簡單。

Answer 2

最簡單的解決方案不是刪除現有元素，而是覆蓋內容。

$(document).ready(function() { 
    $("button").click(function() { 
     $("#div1").html("<b>Appended text</b>"); 
    }); 
}); 

或者您可以使用某些text/html動態創建該ID的元素並將其附加到正文。

$(document).ready(function() { 
    $("button").click(function() { 
     $("#div1").remove(); 
     $('<div>',{ 
      html:"<b>Appended text</b>", //<------here update the content. 
      "id":"div1" 
     }).appendTo(document.body); 
    }); 
});