jQuery對DOM節點進行操作(插入節點之在元素內部插入)


1.定義和用法

  append(content):為所有匹配的元素的內部追加內容(在被選元素的結尾插入內容)

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 創建文本節點
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $("#box").append($jsp)
        })
    </script>
    <div id="box"></div>
</body>

  輸出:

  appendTo(content):將所有匹配的元素添加到另一個元素集合中(在被選元素的結尾插入內容)

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 創建文本節點
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $jsp.appendTo("#box")
        })
    </script>
    <div id="box"></div>
</body>

  輸出:

  prepend(content):在被選元素的開頭插入內容

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 創建文本節點
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $("#box").prepend($jsp)
        })
    </script>
    <div id="box">123</div>
</body>

  輸出:

  prependTo(content):將所有匹配的元素插入到另一個元素集合中的開頭

  示例:

<body>
    <script type="text/javascript">
        //入口函數
        $(document).ready(function(){
            // 創建文本節點
            var $jsp = $("<h1>hello world</h1>")
            //插入
            $jsp.prependTo($("#box"))
        })
    </script>
    <div id="box">123</div>
</body>

  輸出:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM