动态给div中新增html

小颖最近接触的项目中用到了    innerHTML 所以小颖今天就自己做了个demo，当当当当代码请看下方：

页面效果：

 

html：

<body>
    <div class="view-container">
        <div class="change-container">
            <div class="change-area">将要给我里面加入新的html</div>
            <button type="button" name="button" class="btn btn-info">执行动态新增html</button>
        </div>
        <div class="move-area">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-xs-2 col-md-2 t-right">姓名：</label>
                    <div class="col-xs-4 col-md-4">
                        <input type="text" placeholder="请输入您的姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 col-md-2 t-right">手机：</label>
                    <div class="col-xs-4 col-md-4">
                        <input type="text" placeholder="请输入您的手机号">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

css：

    <link rel="stylesheet" href="bootstrap.css" media="screen">
    <style media="screen">
        .view-container {
            width: 60%;
            margin: auto;
        }

        .t-right {
            text-align: right;
        }

        .change-area {
            border: 1px solid pink;
        }

        .change-container,
        .move-area {
            padding-top: 5px;
        }

        .form-horizontal {
            padding: 15px;
            border: 1px solid palegoldenrod;
        }
    </style>

js代码：

<script type="text/javascript">
    $(document).ready(function() {
        $(".btn").on("click", function() {
            //  $('.change-area')是jQuery对象，没有innerHTML属性, innerHTML是原生对象的属性
            // 加上[0]把jQuery对象转换为原生对象
            $('.change-area')[0].innerHTML = "";
            $('.change-area')[0].innerHTML = $('.move-area').html();
            $('.move-area')[0].innerHTML = "";
        });
    });
</script>

 或：

<script type="text/javascript">
    $(document).ready(function() {
        $(".btn").on("click", function() {
            $('.change-area').html("");
            $('.change-area').html( $('.move-area').html());
            $('.move-area').html("");
        });
    });
</script>

 

posted @ 2016-11-01 17:29  爱喝酸奶的吃货  阅读(1080)  评论(0)  编辑  收藏  举报