Reputation: 4634
I have two variables currentSectionElement
and sectionList
.
They looks like:
currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");
I want to display it like this:
<div>
<div>current</div>
<div>sectionList</div>
<div>
So, I've tried following way:
currentSectionElement.after(sectionList);
$(currentSectionElement, sectionList).wrapAll('<div></div>');
However it becomes:
<div>
<div>current</div>
<div>
<div>sectionList</div>
Upvotes: 1
Views: 553
Reputation: 133453
You can use .add()
to combine the currentSectionElement
and sectionList
into a jQuery object then use .wrapAll()
var currentSectionElement = $("<div>current</div>");
var sectionList = $("<div>sectionList</div>");
var newObj = currentSectionElement.add(sectionList);
newObj.wrapAll('<div></div>').parent().appendTo(document.body);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can create another div
and use append()
var currentSectionElement = $("<div>current</div>");
var sectionList = $("<div>sectionList</div>");
var newObj = currentSectionElement.add(sectionList);
$('<div>').append(newObj).appendTo(document.body);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Upvotes: 2
Reputation: 1075925
$(currentSectionElement, sectionList)
doesn't create a jQuery set containing the intersection of currentSectionElement
and sectionList
. To do that, you use currentSectionElement.add(sectionList)
.
If you do that, your wrapAll
works:
currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");
currentSectionElement.add(sectionList)
.wrapAll("<div></div>")
.parent()
.appendTo(document.body);
div {
border: 1px solid black;
padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Upvotes: 1
Reputation: 15565
currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");
$('body').append('<div class=red></div>');
$('body').find('div').append(currentSectionElement).append(sectionList)
.red{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Why not append an empty div then in that empty div append both divs
currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");
$('body').append(currentSectionElement).append(sectionList)
$('body').find('div').wrapAll('<div class=red></div>');
.red{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want wrap all append both in append then use wrapApp()
Upvotes: 1