不能使用javascript向DOM追加比较值

Question

下面的函数根据数据集检查表单提交值。目前，我能够使用console.log返回匹配。我的问题是，鉴于该函数在比较方面工作正常，我如何将结果附加到页面主体?我尝试了以下命令，但无法使其工作:

function lookForMatches(){
const slugName = `${slugData.slug()}`;
for (var i = 0; i < globalArticles.length; i++) {
if(slugName === globalArticles[i]["slug"]){
const showMatches = document.createElement('div')
showMatches.innerHTML(`<p>${globalArticles[i]["slug"]}<p>`);
document.getElementById("slugResults").appendChild(showMatches);
}
else {
console.log("No Matches")
}
}
}

任何帮助将非常感激!

Answer 1

正如其他人所提到的，innerHTML是一个属性，而不是一个函数:

Element属性innerHTML获取或设置元素中包含的HTML或XML标记。

const content = element.innerHTML;
element.innerHTML = htmlString;

在你的例子中，你的代码应该是这样的:

function lookForMatches() {
const slugName = `${slugData.slug()}`;
for (var i = 0; i < globalArticles.length; i++) {
if (slugName === globalArticles[i]["slug"]) {
const showMatches = document.createElement("div");
// Set's the inner HTML
showMatches.innerHTML = `<p>${globalArticles[i]["slug"]}</p>`;
document.getElementById("slugResults").appendChild(showMatches);
} else {
console.log("No Matches");
}
}
}