JavaScript- how to print p element inside div

Question

I Know I can do this with static HTML, but I want to create dynamically, and I am struggling a lot. Here is what I want to do: I have 2 divs.

    <div class="TxtTile">

    </div>
    <div class="pInfo">

    </div>

Inside each div I want to have several paragraphs. Let's say 10, in each div. The first div with class "TxtTile" i want to have the title of something, let's say titles like, age,country,experience,street etc.In the other div with class 'pInfo' I want to contain the information that corresponds with TxTtitle. Like, age 25, experience 10 years etc, that will be taken from local Storage, where I already have it set up. This two divs will be next to each other, which I have already done with css.

For example. Left side

<div class="TxtTile">               `<div class="pInfo">

 <p class="styleforP">                   <p class="styleforP">
    Age                                      25
                                         </p>
 </p>

</div>                                </div>`

I would be happy if I can make this with native js.

Answer 1

There are two ways you can do this:

1) you can create an element and keep appending to its place

First get div element inside which you want to create new element, Here rather than having a class i would prefer to have id based selection of the element

var element = document.querySelector('.TxtTile');

Create a p element and add class to it, you can similarly add content inside it aswell

var pElem = document.createElement('p');
pElem.className = 'styleforP';
pElem.innerHTML = 'Age';

Append that created element inside your div

element.appendChild(pElem);

2) Create an HTML template pass your values to that template and create innerHTML and directly put that innerHTML into your parent element

var item = {
    name: "My Name",
    age: 30,
    other: "Other Info"
}
var template = [];

template.push(
    '<div class="row">',
        '<span class="name-info">' + item.name + '</span>',
        '<span class="age-info">' + item.age + '</span>',
        '<span class="other-info">' + item.other + '</span>',
    '</div>'
);

var htmlString = template.join('');
var element = document.querySelector('.TxtTile');
element.innerHTML = htmlString;

If you are going to add a lot of items then second approach is a lot better, as creating single element and appending them to DOM tree is quite slow, then passing whole HTML string.

Answer 2

var myData = {
  title: "My title",
  info: 25
};

// Store references to the wrapper elements

// The first element that has this class, or null if there aren't any
var titleWrapper = document.querySelector(".js-titleWrapper"); 
var infoWrapper = document.querySelector(".js-infoWrapper");

// Create the paragraph elements
var titleP = document.createElement("p");
var infoP = document.createElement("p");

// Add classes
titleP.classList.add("styleForP");
infoP.classList.add("styleForP");

// Add the text
titleP.innerText = myData.title;
infoP.innerText = myData.info;

// Add the paragraphs to their wrappers
titleWrapper.appendChild(titleP);
infoWrapper.appendChild(infoP);

<div class="TxtTile js-titleWrapper">
</div>

<div class="pInfo js-infoWrapper">
</div>