Search code examples
javascriptjqueryappendchild

Jquery - appending elements on same line

I'm trying to align 4 elements side-by-side in a div. Two of them are images and two of them are paragraph tags.

like this:

[img1] -- [p1] -- [img2] -- [p2]

Below is my code. However, the elements are displaying vertically on top of each other. I want them to be on the same line. How can I do this?

var p1 = document.createElement("p");
var p2 = document.createElement("p");
var t1 = document.createTextNode("A");
var t2 = document.createTextNode("B");

p1.appendChild(t1);
p2.appendChild(t2);

var parent_div = document.createElement("div");
parent_div.classList.add("my_div");
$(".my_div").css('display','inline-block');
//$(".my_div").css('float','left');

var img1 = document.createElement("img");
var img2 = document.createElement("img");
img1.src = "image1.png";
img2.src = "image2.png";

parent_div.appendChild(img1);
parent_div.appendChild(p1);
parent_div.appendChild(img2);
parent_div.appendChild(p2);
Solution

  • Instead of giving your .my_div element a display of inline-block, you need to give the children the styling. This can be done with
    $(".my_div img, .my_div p").css('display', 'inline-block'). Also, note that this has to be applied after the element is added to the page!

    Or alternatively, this can be done in CSS with:

    .my_div > img, .my_div > p {
  display: inline-block;
}

    Which can be seen in the following example:

    var p1 = document.createElement("p");
var p2 = document.createElement("p");
var t1 = document.createTextNode("A");
var t2 = document.createTextNode("B");

//p1.appendChild(pos_percent);
//p2.appendChild(neg_percent);
p1.innerHTML = 'a';
p2.innerHTML = 'b';

var parent_div = document.createElement("div");
parent_div.classList.add("my_div");

var img1 = document.createElement("img");
var img2 = document.createElement("img");
img1.src = "http://placehold.it/100";
img2.src = "http://placehold.it/100";

parent_div.appendChild(img1);
parent_div.appendChild(p1);
parent_div.appendChild(img2);
parent_div.appendChild(p2);

// Sample
var example = document.getElementById('example');
example.appendChild(parent_div);

$(".my_div img, .my_div p").css('display', 'inline-block');
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="example"></div>