在这里使用哪种追加方法（原始JS）

Question

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

wikiName 和 wikiContent 都是动态添加的，但彼此分开。

的JavaScript

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

这就是我的想法：

1）我无法使用.insertAdjacentHTML因为我没有 wikiContentText 的确切文本，所以它是动态创建的。

2）parentDiv.insertBefore(nodeToInsert, nodeToInsertAfter.nextSibling);在这里也不起作用，因为wikiName有下一个兄弟姐妹。

3）我尝试使用.appendChild，你可以在图片中看到它有效，但现在我不知道如何将wikiNames与wikiContent分开设置。

问题：

是否有另一种方法可以在不使用jQuery的情况下附加元素？（我对原始JS感到不满意，并且还不想启动jQuery）

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

提前谢谢。

Answer 1

  

是否有另一种方法可以在不使用jQuery的情况下附加元素？

是。 jQuery变得越来越不必要了。

  

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

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

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

var data = [['Term 1','Term 2','Term 3','Term 4'],['Term 1 description','Term 2 description','Term 3 description','Term 4 description']];

function insertList(data) {
  var dl = document.createElement('dl');
  data[0].forEach(function(wikiName, i) {
    var dt = document.createElement('dt');
    dt.appendChild(document.createTextNode(wikiName));
    dl.appendChild(dt);
    var dd = document.createElement('dd');
    dd.appendChild(document.createTextNode(data[1][i]));
    dl.appendChild(dd);
  });
  document.body.appendChild(dl);
}

insertList(data);

dt {
  font-weight: bold;
}

另一种方法是创建一个HTML字符串并将其作为DL的innerHTML插入：

var data = [['Term 1','Term 2','Term 3','Term 4'],['Term 1 description','Term 2 description','Term 3 description','Term 4 description']];

function insertList2(data) {
  var dl = document.createElement('dl');
  dl.innerHTML = data[0].reduce(function(html, wikiName, i) {
    html += '<dt>' + wikiName + '<dd>' + data[1][i];
    return html;
  },'');
  document.body.appendChild(dl);
}

insertList2(data);

dt {
  font-weight: bold;
}