jQuery--複製元素、包裝元素、刪除元素

複製元素

僅適用於頁面上存在的元素。

<script>
    $(document.body).append('<div id="link">鏈接</div>');//向當前頁面添加一個div元素
    $('h3').clone().appendTo('#link');//將所有h3元素複製到id爲link的div元素下
    	});
</script>
<body>
    <h3 id='site'>php1</h3>
    <h3 id='site'>php2</h3>
    <h3 id='site'>php3</h3>
    <h3 id='site'>php4</h3>
</body>

包裝元素

<script>
    $(document).ready(function() {
        //wrap()將選中所有元素進行包裝,參數是標籤對
        $('h3').wrap('<i></i>');
        //wrapInner()參數是標籤對,包裝每個選中元素的內容
        $('h3').wrapInner('<span style="color:red"></span>');
        //wrapAll()將選中元素做爲一組進行包裝,參數是標籤對,可以嵌套
        $('h3.site').wrapAll('<a href="http://www.baidu.com"></a>');
        $('h3:first').wrapAll('<a href="http://www.baidu.com"><div></div></a>');
    });
</script>
<body>
    <h3>php1</h3>
    <h3>php2</h3>
    <h3 class='site'>php3</h3>
    <h3 class='site'>php4</h3>
</body>

刪除元素

<script>
    $(document).ready(function() {
        //remove()無參數是移除當前選中的所有元素
        $(document.body).remove();
        //remove(selector)只移除選中的元素,選中div中所有元素,刪除p元素
        $('div *').remove('p');
        //empty()刪除選中元素的子元素,div元素仍然存在
        $('div').empty();
    });
</script>
<body>
    <div><img src="images/1.png" alt='photo' style='float: left'><p>fdssfdsfs</p></div>
</body>

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章