JQ 动态添加节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .listyle
        {
            background-color: Red;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var link = $("<a href='http://www.baidu.com'>百度</a>");
            $("div:first").append(link);
        })

        $(function () {
            var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com" };
            $.each(data, function (key, value) {
                var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
                $("#tablesites").append(tr);
            });

        })
        $(function () {
            $("#RemoveUL").click(function () {
                // $("ul li.listyle").remove();
                $("ul li[class=listyle]").remove(); //返回被删除的项
            });
        });
        $(function () {
            $("#btntoright").click(function () {
                var opt = $("#sl1 option:selected").remove();
                $("#sl2").append(opt);
            });
        });
    </script>
</head>
<body>
    <div>
    </div>
    <table id="tablesites">
    </table>
    <ul>
        <li>sdfsdfsdf</li>
        <li class="listyle">sdfsdfsdf</li>
        <li>sdfsdfsdf</li>
        <li class="listyle ">sdfsdfsdf</li>
        <li>sdfsdfsdf</li>
        <li class="listyle">sdfsdfsdf</li>
    </ul>
    <br />
    <input type="button" id="RemoveUL" value="删除" /><br />
    <select id="sl1" multiple="multiple" size="6">
        <option>山东</option>
        <option>山东</option>
        <option>山东</option>
        <option>山东</option>
        <option>山东</option>
        <option>山东</option>
    </select>
    <input type="button" value="》》" id="btntoright" />
    <select id="sl2" multiple="multiple" size="6">
    </select>
</body>
</html>

 

posted @ 2014-05-21 22:00  编程猴子  阅读(1079)  评论(0编辑  收藏  举报