通过追加div放弃其风格

Question

我想克隆的部门有一个特定的位置。我怎样才能追加到我拥有的其他部门。

我格样式代码

<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;"> 

这里的链接 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”除涉及像这样

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

jQuery的功能附加功能不工作后 只能出现在一行“COL-XS-8”和“col-XS-4”附加

$(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

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

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

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

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

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