在這裏使用哪個附加方法（原始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 s有下一個兄弟姐妹。

3）我試過使用.appendChild，正如你可以在圖片中看到它的工作，但現在我不知道如何風格wikiNames s分開wikiContent s。

問題：

有另一種方式爲追加一個元素，而無需使用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; 
 
}