码迷,mamicode.com
首页 > Web开发 > 详细

动态给div中新增html

时间:2016-11-01 18:54:24      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:lcs   air   pes   做了   zrc   each   scm   uid   padding   

小颖最近接触的项目中用到了    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>

 

动态给div中新增html

标签:lcs   air   pes   做了   zrc   each   scm   uid   padding   

原文地址:http://www.cnblogs.com/yingzi1028/p/6020274.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!