Javascript 此处使用哪种追加方法（原始JS）

所以我找到了几种在Vanilla JS中添加元素的方法。我的情况是：

wikiName和wikiContent都是动态添加的，但彼此独立

JavaScript

以下是我的想法：

1我不能使用.insertAdjacentHTML，因为我没有wikiContentText的确切文本，它是动态创建的

2 parentDiv.insertBeforenodeToInsert、nodeToInsertAfter.nextSibling；在这里也不起作用，因为wikiNames有下一个兄弟姐妹

3我试过使用.appendChild，正如你在图片中看到的那样，它起作用了，但现在我不知道如何将WikiNames与wikiContents分开

问题是：

有没有其他方法可以不使用jQuery附加元素？我还不习惯使用原始JS，现在还不想启动jQuery

或者我如何将这些标题与段落分开

先谢谢你

有没有其他方法可以不使用jQuery附加元素

对。jQuery变得越来越没有必要了

或者我如何将这些标题与段落分开

使用CSS，选择符可以是元素或类

在我看来，这是一个定义列表，或者。创建一个DL，然后这个术语可以放在DT元素中，解释可以放在DD元素中。下面使用了所有DOM方法：

var数据=['Term 1'、'Term 2'、'Term 3'、'Term 4']、['Term 1 description'、'Term 2 description'、'Term 3 description'、'Term 4 description']； 函数insertListdata{ var dl=document.createElement'dl'； 数据[0]。forEachfunctionwikiName，i{ var dt=document.createElement'dt'； dt.appendChilddocument.createTextNodewikiName； dl.dt； var dd=document.createElement'dd'； dd.appendChilddocument.createTextNodedata[1][i]； dl.dd； }; document.body.appendChilddl； } 插入列表数据； dt{ 字体大小：粗体；

---

}如果您熟悉jQuery语法，那么应该使用jquerylight。这个尺寸很值。两年来，我一直在轻松地编写vanilla，但仍然发现自己更想用jQuery编写。特别是当我想通过DOM集合，比如说，惊人的动画或任何其他超时。在香草中，你需要封口。在jQuery中，您得到了。每个。缺点是，如果使用jQuery，您不需要这么快就理解闭包。如果你对任何东西都不熟悉，不要使用jQuery。我不知道如何将WikiNames与wikiContents区分开来只是给他们不同的类属性？我不认为OP的数据是html转义的，所以这是第一种方法，而不是第二种。第一种方法有效，我学习了新的html元素，谢谢！这样代码看起来更干净。

function processRequest() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    response = JSON.parse(xhr.responseText);
    console.log(response);

    var divResults = document.getElementById("results");
    for (i=0; i<10; i++) {

        // Iterates through names of entries
        var wikiName = document.createElement('p');
        var wikiNameText = document.createTextNode(response[1][i]);
        wikiName.appendChild(wikiNameText);
        divResults.appendChild(wikiName);

        var wikiContent = document.createElement('p');
        var wikiContentText = document.createTextNode(response[2][i]);
        wikiContent.appendChild(wikiContentText);
        wikiName.appendChild(wikiContent);
    } 
  }
}