JQuery动态创建元素

最新推荐文章于 2023-06-16 15:43:17 发布

原创最新推荐文章于 2023-06-16 15:43:17 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery动态创建元素

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <input type="button" id="btn1" value="按钮"/>
    <div id="div1" style="width:300px;height:300px;border:1px solid red">
        我是已有的元素
    </div>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //第一种创建元素的方法，直接用append()追加
                var aObj = $('<a href="#" target="_blank">百度</a>');
                $("#div1").append(aObj);
                //第二种创建元素的方法，将创建好的元素主动追加到目标元素上
                $('<a href="#" target="_blank">百度</a>').appendTo("#div1");
                //将创建的元素插入到最前面，使用prepend()
                var aObj = $('<a href="#" target="_blank">百度</a>');
                $("#div1").prepend(aObj);
                //将创建的元素主动插入到最前面
                $('<a href="#" target="_blank">百度</a>').prependTo("#div1");
                //将创建的元素放在已有元素的后面，使用after()
                var aObj = $('<a href="#" target="_blank">百度</a>');
                $("#div1").after(aObj);
                //将创建的元素放在已有的元素前面，使用before()
                var aObj = $('<a href="#" target="_blank">百度</a>');
                $("#div1").before(aObj);
                //将创建好的元素主动插入到已有元素的后面
                $('<a href="#" target="_blank">百度</a>').insertAfter("#div1");
                //将创建好的元素主动插入到已有元素的前面
                $('<a href="#" target="_blank">百度</a>').insertBefore("#div1");
            });
        });
    </script>
</body>
</html>