缩短多个和重复属性

Question

(我今天早些时候遇到了类似的问题，但现在不同了(。我有一个代码可以创建一个元素，为它们设置属性，最后附加到父div。

我已经试过了：

Object.entries(selectorsByProp).forEach(([prop, selector]) => {
document.querySelector(selector).innerHTML = post[i][prop];
});

这实际上有效，但它只能操作显示和显示我的数据的元素。我需要的是它必须创建元素、设置属性和追加。这是我荒谬的代码...

var post = JSON.parse(this.response);
for (var i = 0; i < 3; i++) {
var listcard = document.createElement("div"),
imgcontent = document.createElement("div"),
imgcntnr = document.createElement("div"),
imglnk = document.createElement("a"),
a = document.createElement("a"),
img = document.createElement("img"),
txtcntnt = document.createElement("div"),
span = document.createElement("span");
listcard.setAttribute('class', 'list-card');
imgcontent.setAttribute('class', 'img-content');
imgcntnr.setAttribute('class', 'img-container');
imglnk.setAttribute('href', '#');
img.setAttribute('class', 'thumb');
txtcntnt.setAttribute('class', 'text-content');
a.setAttribute('href', '#');
a.setAttribute('class', 'title');
span.setAttribute('class', 'excerpt');
img.setAttribute('src', post[i].img);
img.setAttribute('alt', post[i].titles);
a.innerHTML = post[i].titles;
span.innerHTML = post[i].descs;
imglnk.appendChild(img);
imgcntnr.appendChild(imglnk);
imgcontent.appendChild(imgcntnr);
txtcntnt.innerHTML += a.outerHTML + span.outerHTML;
listcard.innerHTML += imgcontent.outerHTML + txtcntnt.outerHTML;
parent.appendChild(listcard);
}

<div class="list-card">
<div class="img-content">
<div class="img-container">
<a href="#"> <img src="https://picsum.photos/182/135/?random" alt="" class="thumb"></a>
</div>
</div>
<div class="text-content">
<a href="#" class="title">Lorem Ipsum</a>
<span class="excerpt">Lorem Ipsum</span>
</div>
</div>

Answer 1

您可以考虑插入 HTML 以使用insertAdjacentHTML一次插入所有内容，而不是(详细地(创建和附加大量元素。使用模板文本来保持内容的可读性：

const makeHTML = ({ img, titles, descs }) => `
<div class="list-card">
<div class="img-content">
<div class="img-container">
<a href="#"> <img src="${img}" alt="${titles}" class="thumb"></a>
</div>
</div>
<div class="text-content">
<a href="#" class="title">${descs}</a>
<span class="excerpt">${descs}</span>
</div>
</div>
`;
post.forEach((item) => {
parent.insertAdjacentHTML('beforeend', makeHTML(item));
});

请记住，此代码与现有代码一样，假定输入是可信的。如果不是，请先去除 HTML 标记，例如

const makeHTML = ({ img, titles, descs }) => {
const safeImg = stripHTML(img);
const safeTitles = stripHTML(titles);
const safeDescs = stripHTML(descs);
return `
// rest of the template literal
// which references safeImg, etc
`;
};

否则，您将允许任意脚本执行。