此处使用哪种追加方法(原始 JS)
Which append method to use here (raw JS)
所以我找到了几种在 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 刚刚)
或者如何将这些标题与段落分开设置样式?
提前谢谢你。
Is there another way to append an element without using jQuery?
是的。 jQuery 变得越来越没有必要了。
Or how can I style those headings separately from paragraphs?
使用 CSS,选择器可以是元素或 class。
在我看来这是一个定义列表,或者 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 的内部 HTML 插入:
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;
}
所以我找到了几种在 Vanilla JS 中附加元素的方法。我的情况是这样的:
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 刚刚)
或者如何将这些标题与段落分开设置样式?
提前谢谢你。
Is there another way to append an element without using jQuery?
是的。 jQuery 变得越来越没有必要了。
Or how can I style those headings separately from paragraphs?
使用 CSS,选择器可以是元素或 class。
在我看来这是一个定义列表,或者 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 的内部 HTML 插入:
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;
}