jquery动态操作元素


<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('#btnAppend').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').append(b);
            });
            $('#btnAppendTo').click(function () {
                $('<b>zhh</b>').appendTo($('#dv'));
            });


            $('#btnPrepend').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').prepend(b);
            });


            $('#btnPrependTo').click(function () {
                $('<b>zhh</b>').prependTo($('#dv'));
            });


            $ ('#btnAfter').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').after(b);
            });


            $('#btnInsertAfter').click(function () {
                $('<b>zhh</b>').insertAfter($('#dv'));
            });


            $('#btnBefore').click(function () {
                var b = $('<b>zhh</b>');
                $('#dv').before(b);
            });


            $('#btnInsertBefore').click(function () {
                $('<b>zhh</b>').insertBefore($('#dv'));
            });


            $('#btnEmpty').click(function () {
                $('#dv').empty();
            });








        });
    </script>
</head>
<body>
    <input type="button" name="name" value="Append "  id="btnAppend"/>
    <input type="button" name="name" value="AppendTo "  id="btnAppendTo"/>
    <input type="button" name="name" value="Prepend "  id="btnPrepend"/>
    <input type="button" name="name" value="PrependTo "  id="btnPrependTo"/>
     <input type="button" name="name" value="After "  id="btnAfter"/>
    <input type="button" name="name" value="InsertAfter "  id="btnInsertAfter"/>
    <input type="button" name="name" value="before "  id="btnBefore"/>
    <input type="button" name="name" value="InsertBefore "  id="Button1"/>
    <input type="button" name="name" value="Empty "  id="Button2"/>


    <div id="dv">
      Hello world
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/dxm809/article/details/80278301