ここで使用する追加メソッド（raw JS）

Question

したがって、バニラ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）私はwikiContentTextの正確なテキストを持っていないので、私は.insertAdjacentHTMLを使用することはできません、それが動的に作成されます。

2）parentDiv.insertBefore(nodeToInsert, nodeToInsertAfter.nextSibling);は、wikiNameに次の兄弟がいるため、ここでは動作しません。

3）私は.appendChildを使って試しましたが、図のように機能しましたが、を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; 
 
}