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

Question

我知道我可以用静态HTML做到这一点,但我想动态创建,而且我正在苦苦挣扎.这是我想要做的:我有2个div.

    <div class="TxtTile">

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

    </div>

在每个div里面我想要几个段落.让我们说每个div中有10个.第一个div类"TxtTile"我希望有一些东西的标题,让我们说标题,如年龄,国家,经验,街道等.在另一个div与类 'pInfo'我想要包含与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 字符串。