• 技术文章 >web前端 >前端问答

    jquery怎么增加一个元素

    青灯夜游青灯夜游2022-04-28 18:52:24原创445

    增加方法:1、用“$("指定元素").after(新元素)”语句,可向指定元素后面增加一个同级元素;2、用“$("指定元素").before(新元素)”语句,可向指定元素前面增加同级元素;3、用“$(父元素).append(子元素)”语句。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    在jquery中,可以使用以下方法来增加元素:

    1、使用after()

    after()方法向所选元素外部的“后面”插入内容。

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(function () {
                $("button").click(function () {
                    var a = "<span style='color:red;'>一个span元素</span>";
                    $("div").after(a);
                })
            })
        </script>
    	<style>
    		body *{
    			background-color:pink;
    		}
    	</style>
    	</head>
    	<body>
    		<h1>一个大标题</h1>
    		<p>一个p段落</p>
    		<div>一个div元素</div>
    		<p>一个p段落</p>
    		<button>在div后插入一个同级节点</button>
    	</body>
    </html>

    1.gif

    2、使用before()

    before()可以在指定元素前插入兄弟节点

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(function () {
                $("button").click(function () {
                    var a = "<span style='color:red;'>一个span元素</span>";
                    $("div").before(a);
                })
            })
        </script>
    	<style>
    		body *{
    			background-color:pink;
    		}
    	</style>
    	</head>
    	<body>
    		<h1>一个大标题</h1>
    		<p>一个p段落</p>
    		<div>一个div元素</div>
    		<p>一个p段落</p>
    		<button>在div前插入一个同级节点</button>
    	</body>
    </html>

    2.gif

    3、使用append()

    append( ) 方法可以向所选元素内部的“末尾处”插入内容。

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(function () {
                $("button").click(function () {
                    var a = "<p style='color:red;'>一个p元素</p>";
                    $("div").append(a);
                })
            })
        </script>
    	<style>
    		body *{
    			background-color:pink;
    		}
    	</style>
    	</head>
    	<body>
    		<h1>一个大标题</h1>
    		<p>一个p段落</p>
    		<div>一个div元素</div>
    		<p>一个p段落</p>
    		<button>向div内的末尾处插入一个子元素</button>
    	</body>
    </html>

    3.gif

    4、使用prepend()

    prepend( ) 方法可以向所选元素内部的“开始处”插入内容。

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(function () {
                $("button").click(function () {
                    var a = "<p style='color:red;'>一个p元素</p>";
                    $("div").prepend(a);
                })
            })
        </script>
    	<style>
    		body *{
    			background-color:pink;
    		}
    	</style>
    	</head>
    	<body>
    		<h1>一个大标题</h1>
    		<p>一个p段落</p>
    		<div>一个div元素</div>
    		<p>一个p段落</p>
    		<button>向div内的开始处插入一个子元素</button>
    	</body>
    </html>

    4.gif

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery怎么增加一个元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery怎么清除元素下的所有子元素 下一篇:jquery怎么隐藏和显示a标签
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• jquery怎么删除第3个li元素• jquery可以监听事件吗• jquery有哪些对节点访问的方法• css3动画和jquery动画有什么区别• jquery怎么实现输入框内容不能为空
    1/1

    PHP中文网