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