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函数，这样您可以在调用.empty()之前调用.append()以添加新文本，甚至可以将两者链接起来一个接一个地命令，所以你不必重新评估选择器：

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

如何使用相同的按钮一个接一个地调用两个函数？

2 个答案: