国产视频appjquery 中有很多種追加元素的方法,今天就介紹幾種最常用的,做個筆記,記錄一下。

jQuery append() 方法

append():方法可以在被選元素的內部的結尾處插入內容

語法:

$(selector).append(content)

例:jq在元素內部的結尾處追加元素

代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div>我是原來的內容</div>
    <div>飛鳥慕魚博客</div>
</div>
<script>
    $('#mochu').append('<p>我要是插入的內容</p>');
</script>
</body>
</html>

代碼運行結果,如下圖

jQuery 中幾種常用的追加元素的方法

注:

国产视频app1、如果使用JS動態修改HTML元素后,只能在瀏覽器的控制臺中查看

2、查看方法:瀏覽器 按 F12

jQuery prepend() 方法

国产视频appjQuery prepend():方法在被選元素內部的起始位置插入內容

語法:

$(selector).prepend(content)

例:JQ在元素內部的開始位置追加HTML元素

代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div>我是原來的內容</div>
    <div>飛鳥慕魚博客</div>
</div>
<script>
    $('#mochu').prepend('<p>我是利用prepend方法插入的內容</p>');
</script>
</body>
</html>

運行結果如下圖:

jQuery 中幾種常用的追加元素的方法

jQuery before() 方法

jQuery before():方法在被選元素的前面插入元素,形成兄弟節點

語法:

$(selector).before(content)

例:jq在指定元素前面追加內容

代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div>我是原來的內容</div>
    <div>飛鳥慕魚博客</div>
</div>
<script>
    $('#mochu').before('<p>我是利用before方法插入的內容</p>');
</script>
</body>
</html>

代碼運行結果:

jQuery 中幾種常用的追加元素的方法

jQuery after() 方法

jQuery after():方法在被選元素的后面插入內容,形成兄弟節點的關系。

語法:

$(selector).after(content)

例:JQ在指定元素的后面插入內容

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div>我是原來的內容</div>
    <div>飛鳥慕魚博客</div>
</div>
<script>
    $('#mochu').after('<p>我是利用after方法追加的內容</p>');
</script>
</body>
</html>

代碼運行結果:

jQuery 中幾種常用的追加元素的方法