海阔天空

手机扫码查看

2020javaweb教程之jQuery添加元素和删除元素

添加元素

<p id="p1">这是条默认的文本</p>
<button>在默认文本内部前面添加文本</button>
<button>在默认文本内部后面添加文本</button><br>
<button>在默认文本外部上面添加元素</button>
<button>在默认文本外部后面添加元素</button>
<script>

    $(function(){
        $("button:first").click(function(){
            $("#p1").prepend("前面添加的文本,");//在被选元素内部前面添加
        })
        $("button:eq(1)").click(function(){
            $("#p1").append(",后面添加的文本。");//在被选元素内部后面添加
        })
        $("button:eq(2)").click(function(){
            $("#p1").before("<p>在默认文本外部上面添加元素</p>")
        })
        $("button:eq(3)").click(function(){
            $("#p1").after("<p>在默认文本外部下面添加元素</p>")
        })
    })
</script>

删除/清空元素

<div id="div">
    <p>div的p标签</p>
    <span>div的span标签</span>
</div>
<div id="div2">
    <p>div2的p标签</p>
    <span>div2的span标签</span>
</div>
<style>
    div{width:200px;height:100px;border:1px solid red;}
</style>
<button>删除div内容(remove)</button>
<button>清空div2的内容(empty)</button><br>
<button>删除div的span</button>
<button>删除div2的p</button>
<script>
    $(function(){
        $("button:first").click(function(){
            $("#div").remove();//删除元素以及内容
        })
        $("button:eq(1)").click(function () {
            $("#div2").empty();//清空元素内容
        })
        $("button:eq(2)").click(function () {
            $("#div span").remove("span");//移除指定元素
        })
        $("button:eq(3)").click(function () {
            $("#div2 p").empty("p");//清空指定元素
        })
    })
</script>