Question

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

    <div class="TxtTile">

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

    </div>

在每个div中我想要几个段落。让我们在每个div中说10。类"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字符串。

Answer 2

＆＃13;

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);

＆＃13;

<div class="TxtTile js-titleWrapper">
</div>

<div class="pInfo js-infoWrapper">
</div>

＆＃13;

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);

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

3 个答案: