Which append method to use here (raw JS)

Question

So I found several methods for appending an element in Vanilla JS. My situation is this:

wikiName and wikiContent are both added dynamically but separately from each other.

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

Here's what I think:

1) I can't use .insertAdjacentHTML because I don't have exact text of wikiContentText, it's created dynamically.

2) parentDiv.insertBefore(nodeToInsert, nodeToInsertAfter.nextSibling); also doesn't work here IMHO, because wikiNames have next siblings.

3) I tried using .appendChild and as you can see in the picture it worked but now I don't know how to style wikiNamess separately from wikiContents.

The question:

Is there another way to append an element without using jQuery? (I'm not comfortable with raw JS yet and don't want to start jQuery just yet)

Or how can I style those headings separately from paragraphs?

Thank you in advance.

Answer 1

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

Yes. jQuery is becoming increasingly unnecessary.

Or how can I style those headings separately from paragraphs?

Use CSS, with a selector that can be the element or a class.

Seems to me this is a definition list, or DL element. Create a DL, then the term can be put in a DT element and the explanation in a DD element. The following uses all DOM methods:

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

An alternative is to create a string of HTML and insert it as the innerHTML of a DL:

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