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

Question

我知道我可以用靜態HTML做到這一點，但我想動態創建，而且我正在苦苦掙扎。 這是我想要做的：我有2個div。

    <div class="TxtTile">

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

    </div>

在每個div里面我想要幾個段落。 讓我們說每個div中有10個。 帶有"TxtTile"類的第一個div我希望得到一些東西的標題，讓我們說像年齡，國家，經驗，街道等標題。在另一個帶有'pInfo'類'pInfo' div中我想要包含與TxTtitle對應的信息。 比如，25歲，經歷10年等，將從我已經設置的本地存儲中獲取。 這兩個div將是彼此相鄰的，我已經用css完成了。

例如。 左邊

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

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

</div>                                </div>`

如果我能用本機js做這個，我會很高興。

Answer 1

有兩種方法可以做到這一點：

1）你可以創建一個元素並繼續追加它的位置

首先得到你要創建新元素的div元素，這里不是有一個類我更喜歡基於id的元素選擇

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

創建一個p元素並向其添加類，您也可以在其中添加內容

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

在div中添加創建的元素

element.appendChild(pElem);

2）創建一個HTML模板將值傳遞給該模板並創建innerHTML並直接將innerHTML放入您的父元素中

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;

如果你要添加很多項目，那么第二種方法要好得多，因為創建單個元素並將它們附加到DOM樹是非常慢的，然后傳遞整個HTML字符串。

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

我認為如果你有多個記錄然后你不能通過querySlector來處理這個是一個壞主意。

好主意是創建這樣的父元素

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

然后通過javascript獲取此元素，然后將此元素附加到您的動態記錄中

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

如果記錄是多個，則應用循環

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