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

Question

我知道我可以用静态 HTML 做到这一点，但我想动态地创建，而且我很挣扎。这是我想要做的:我有 2 个 div。

    <div class="TxtTile">

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

    </div>

在每个 div 中我想有几个段落。让我们说 10，在每个 div 中。类 "TxtTile" 的第一个 div 我想要一些东西的标题，比如年龄，国家，经验，街道等。在类 '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 字符串。