JavaScript-如何在div中打印p元素

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> 

Answer 3

i think this is a bad idea for doing this if you have multiple records then you cant handle by querySlector.

good idea is create a parent element like this

<div id="parent"></div>

then get this element by javascript and then append this element with your dynamic records like this

var parentEle = document.getElementById("parent");

apply loop if records are multiple

var child = Document.createElement("div");
child.innerHTML = "<div class='TxtTile'>age</div><div class='pInfo'>25</div>";
parentEle.appendChild(child);