[英]JavaScript- how to print p element inside div
我知道我可以用静态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做这个,我会很高兴。
有两种方法可以做到这一点:
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字符串。
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>
我认为如果你有多个记录然后你不能通过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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.