通过附加 div 失去它的风格

Question

我要克隆的部门有一个特定的位置。我怎样才能附加我拥有的其他 division。

我的 div 样式代码

<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8  verticalLine" id="nestedFeilds"  style=" margin-left: 10px ;float:left; display: none;">

这里是 link https://screenshots.firefox.com/TAqBN5IIT8atR6lA/localhost

我渲染上面代码的地方是

<div class= "row" id="2ndmainContainer">
    <div class="col-xs-4"></div>
    <div class="col-xs-8  verticalLine" id="showhere"  style=" margin-left: 10px ;float:left;">
    </div>
</div>

我的 "nestedFeilds" div 结束后不久。我有 "showhere" div 它只出现在行的 "col-xs-8" 并且 "col-xs-4" 不工作追加函数后是这样的

https://screenshots.firefox.com/IngUgWgQTJeAjlOC/localhost

jquery 追加函数

$(document).ready(function() {


 $("#addNew").click(function() {
    var maindiv = document.getElementById('nestedFeilds').innerHTML;
    $("#showhere").append(maindiv);
     maindiv.attr('name', 'myid');
  });
});

这里是 jsfiddle 但这里不起作用 https://jsfiddle.net/r9wtcsj9/

Answer 1

希望这对您有所帮助（全屏查看以查看结果）。您可以看到我所做的更改，包括 col-md-1 和 col-md-5 两列，并删除了 label 的内联样式。您的其余代码保持不变。

$("#addNew, #addNew1").click(function () {
 if ($("#nestedFeilds").is(":visible")) {
  $("#showhere").append($("#nestedFeilds").html());
  $("#2ndmainContainer").show();
 }

 $("#nestedFeilds").attr('name', 'myid').show();
 $("#addNew").hide();
 $("#addNew1").show();
});

.verticalLine {
    border-left: thick solid #0accff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form>
<label>Your Profile</label>
<div class="row" id="mainContainer">
 <div class="col-md-1 col-xs-4">
  <label for="Education">Education</label>
 </div>
 <div class="col-md-7 col-xs-8 verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display:none;">
  <a href="" style="color: red;float:right; ">Delete Education</a>
  <input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name">
  <br>
  <input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name">
  <br>
  <input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name">
  <br>
  <div class="row">
   <div class="col-xs-3">
    <select class="form-control" id="YearName" style="float:left;" required="" name="first_year_name" value=''>
      <option value="2017">2017</option>
     </select>
   </div>
   <div class="col-xs-3">
    <select class="form-control" style="margin-left: -20px; float:left;" id="monthName" required="" name="first_Name_month" value=''>Select Month
      <option value='01'>January</option>
     </select>
   </div>
   <div style="margin-left: -20px;float:left;">
    <p style="text-align: left; margin-top: 5px">&nbsp;to</p>
   </div>
   <div class="col-xs-3">
    <select class="form-control" id="YearName" style="margin-right:30px; float:left;" required="" name="second_year_name" value=''>Select Month
      <option value="2017">2017</option>
     </select>
   </div>
   <div class="col-xs-3">
    <select class="form-control" id="monthName" style="float:left; margin-left: -20px;" required="" name="Second__Name_month"
     value=''>Select Month
       <option value='01'>January</option>
     </select>
   </div>
  </div>
 </div>
 <div style="float:left;"><a id="addNew"> Add Education</a></div>
</div>

<div class="row" id="2ndmainContainer" style="display:none;">
 <div class="col-md-1 col-xs-4"></div>
 <div class="col-md-7 col-xs-8 verticalLine" id="showhere" style=" margin-left: 10px ;float:left;">
 </div>
</div>

<div style="margin-left: 133px;float:left;"><a id="addNew1" style="display:none;"> Add Education</a></div>
</form>

通过附加 div 失去它的风格

by appending div loosing its style

html

javascript

division

twitter-bootstrap