CODEWITHSUNDEEP
htmljquery
ggonmar
ggonmar

Reputation: 839

Adding div objects to a containing div

I'm new to the notation of creating divs in jQuery in the form of

let x= $('<div />, { id:"this", class:"that", html:"Hello world" });
$('body').append(x);

And I would like to populate a div with several previously created divs with the same process:

let x1= $('<div />, { id:"x1", class:"text", html:"Hello world" });
let x2= $('<div />, { id:"x3", class:"text", html:"How are you?" });
let container= $('<div />, { id:"container", html: x1 + x2});
$('body).append(container);

If I only put html: x1 on container, I get to see it without a problem, but I don't grasp how I can elegantly add both x1 and x2 to said container.

I would also like to avoid using container.append(), as my intention is to actually understand if I can add the elements to container upon its creation.

Is there a way of doing this nicely? or is .append() my only hope?

Thanks!

Upvotes: 0

Views: 52

Answers (1)

ikiK
ikiK

Reputation: 6532

let container=$('<div id="container"/>');
$('body').append($(container).append(x1).append(x2));


let x1=$('<div />', { id:"x1", html:"Hello"});
let x2=$('<div />', { id:"x2", html:"Hello"});

let container=$('<div id="container"/>');
$('body').append($(container).append(x1).append(x2));
#x1{ background-color:lime; width:100px; height:100px; margin:10px;}
#x2{ background-color:blue; width:100px; height:100px; margin:10px;}
#container{ background-color:red; width:100px; height:100px; padding:35px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>

</body>
</html>

or

let container=$('<div id="container"/>').append(x1).append(x2);
$('body').append(container);


let x1=$('<div />', { id:"x1", html:"Hello"});
let x2=$('<div />', { id:"x2", html:"Hello"});

let container=$('<div id="container"/>').append(x1).append(x2);
$('body').append(container);
#x1{ background-color:lime; width:100px; height:100px; margin:10px;}
#x2{ background-color:blue; width:100px; height:100px; margin:10px;}
#container{ background-color:red; width:100px; height:100px; padding:35px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>

</body>
</html>

or

let x1='<div id="x1">Hello</div>';
let x2='<div id="x2">Hello</div>';

let container=$('<div />', { id:"container", html: x1 + x2 });
$('body').append(container);

The way you intended works if you do not create them as jquery objects at start, save them as string and then you can append them in container creation. 

let x1='<div id="x1" class:"text">Hello1</div>';
let x2='<div id="x2" class:"text">Hello2</div>';

let container=$('<div />', { id:"container", html: x1 + x2 });
$('body').append(container);
#x1{ background-color:lime; width:100px; height:100px; margin:10px;}
#x2{ background-color:blue; width:100px; height:100px; margin:10px;}
#container{ background-color:red; width:100px; height:100px; padding:35px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>

</body>
</html>

Upvotes: 2

Related Questions