jQuery——元素的创建、添加和移除

元素创建的另一种方式

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                //通过innerHTML的方式创建元素——以字符串的方式
                $("#dv").html("<input type='button' value='按钮'>");
            });
        });
    </script>

元素添加的不同方法

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            //点击按钮，创建元素
            $("#btn").click(function(){
                1. 把创建的span标签这个子元素直接插入到div中第一个子元素前面
                $("#dv").prepend($("<span>this is span</span>"));
                2. 主动的方式
                $("<span>this is span</span>").prependTo($("#dv"));
                3. 把元素添加到div的后面的位置，是div的下一个兄弟元素
                $("#dv").after($("<span>this is span</span>"));
                4. 把元素添加到div前面的位置，是div上一个兄弟元素
                $("#dv").before($("<span>this is span</span>"));
            });
        });
    </script>
......
	<input type="button" value="创建一个按钮" id="btn"/>
	<div id="dv"><p>这是一个p</p></div>
	<p></p>

移除元素的相关方法

    <script src="jquery-1.12.1.js"></script>
    <script>
                //页面加载
                $(function(){
                    //点击按钮
                    $("#btn").click(function(){
                        从父级元素中移除子级元素——移除所有的子元素
                        1.
                        $("#dv").html("");
                        2.
                        $("#dv").empty();//清空
                    });
                });
    </script>
.....
<input type="button" value="创建一个按钮" id="btn"/>
<div id="dv"><p>这是一个p</p><span>this is a span</span></div>
<p></p>

例：点击按钮动态的创建表格

        <style>
            div{
                width: 600px;
                height: 450px;
                border: 1px solid red;
            }
        </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        //表格数据的数组
        var arr=[
            {"name":"百度","href":"www.baidu.com"},
            {"name":"CSDN","href":"www.csdn.net"},
            {"name":"谷歌","href":"www.google.com"},
            {"name":"爱奇艺","href":"www.iqiyi.com"},
            {"name":"iQuery","href":"api.jquery.com"},
        ];
        //页面加载
        $(function(){
            //点击按钮
            $("btn").click(function(){
                var table=$("<table style='cursor: pointer' border='1' cellspacing='0' cellpadding='0'></table>");
                //把表格加入到一个div中
                $("#dv").append(table);
                //循环遍历数组，创建行
                for(var i=0;i<arr.length;i++){
                    var dt=arr[i];//每个数组元素，都是对象
                    //创建行，并加入到table中
                    var tr=$("<tr></tr>");
                    table.append(tr);
                    //在列中显示内容，列在行中
                    //创建td，并加入到tr中
                    var td1=$("<td>"+dt.name+"</td>");
                    //第一个列加入到tr中
                    tr.append(td1);
                    var td2=$("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>");
                    //第二个列加入到tr中
                    tr.append(td2);

                    //鼠标进入到每一行，该行有高亮显示的效果
                    tr.mouseenter(function(){//鼠标进入
                        $(this).css("backgroundColor","green");
                    }).mouseleave(function(){//鼠标离开
                        $(this).css("backgroundColor","");
                    });
                }
            });
        });
    </script>
    ......
	<input type="button" value="创建一个表格" id="btn"/><div id="dv"></div>