javascript - 此处使用哪种追加方法(原始 JS)

Question

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

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 有下一个 sibling 。

3) 我尝试使用 .appendChild 并且正如您在图片中看到的那样有效，但现在我不知道如何将 wikiNames 与 分开设置样式>wikiContents.

问题:

是否有另一种不使用 jQuery 来 append 元素的方法？(我对原始 JS 还不太满意，现在还不想开始使用 jQuery)

或者如何将这些标题与段落分开设置样式？

提前谢谢你。

Answer 1

Is there another way to append an element without using jQuery?

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

Or how can I style those headings separately from paragraphs?

使用 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;
}