JavaScript 无法在 'appendChild' 上执行 'Node' 参数 1 不是类型 'Node'

Question

想法是，当屏幕小于 800px 时，questLinks 数组中的元素将进入 ul，id 为“links”。

let isActivated = false;

var questLinks =[
document.createElement("li").textContent ="<li><a href=\"index.php\" class=\"tab\">Home</a></li>",
document.createElement("li").textContent ="<li><a href=\"choose-language.php\" class=\"tab\">Quests</a></li>",
document.createElement("li").textContent ="<li><a href=\"battlesequence.php\" class=\"tab\">Battle arena</a></li>",
document.createElement("li").textContent ="<li><a href=\"ranking.php\" class=\"tab\">Rankings</a></li>",
document.createElement("li").textContent ="<li><a href=\"clanPage.php\" class=\"tab\">Clan</a></li>",
document.createElement("li").textContent ="<li><a href=\"profile.php\" class=\"tab\">Profile</a></li>",
document.createElement("li").textContent ="<li><a href=\"AboutUs.php\" class=\"tab\">About</a></li>",
document.createElement("li").textContent ="<li><a href=\"contactus.php\" class=\"tab\">Contact us</a></li>"
];

function move() {
	var headerList = document.getElementById('list');

	if (document.getElementById("bod").clientWidth <= 800 ) {
		console.log("Width < 800");
		if (isActivated == false) {
			console.log("isActivated = " + isActivated);
			for (link of questLinks) {
				console.log("There he is.");
				headerList.appendChild(link);
			}
			isActivated = true;
		}

	}
}

此代码导致错误:“JavaScript 无法在‘Node’参数 1 上执行‘appendChild’，该参数 1 不是‘Node’类型”

Answer 1

您在这里构建的不是您认为的那样:

var questLinks =[
document.createElement("li").textContent ="<li><a href=\"index.php\" class=\"tab\">Home</a></li>",
document.createElement("li").textContent ="<li><a href=\"choose-language.php\" class=\"tab\">Quests</a></li>",
document.createElement("li").textContent ="<li><a href=\"battlesequence.php\" class=\"tab\">Battle arena</a></li>",
document.createElement("li").textContent ="<li><a href=\"ranking.php\" class=\"tab\">Rankings</a></li>",
document.createElement("li").textContent ="<li><a href=\"clanPage.php\" class=\"tab\">Clan</a></li>",
document.createElement("li").textContent ="<li><a href=\"profile.php\" class=\"tab\">Profile</a></li>",
document.createElement("li").textContent ="<li><a href=\"AboutUs.php\" class=\"tab\">About</a></li>",
document.createElement("li").textContent ="<li><a href=\"contactus.php\" class=\"tab\">Contact us</a></li>"
];

那个questLinks变量最终将成为一个字符串数组，而不是一个元素数组。像这样的表达式:

document.createElement("li").textContent ="<li><a href=\"index.php\" class=\"tab\">Home</a></li>"

的值在 = 的右侧符号。您的代码正在创建元素，但由于所有重要的是表达式的最终值，所有元素都被丢弃，您在这些赋值的右侧留下一个字符串数组。

您可以做的是创建一个函数来创建和初始化您的元素:

function makeLink(content) {
  var li = document.createElement("li");
  li.innerHTML = content;
  return li;
}

var questLinks = [
    makeLink("<a href=\"index.php\" class=\"tab\">Home</a>"),
    makeLink("<a href=\"choose-language.php\" class=\"tab\">Quests</a>"),
    makeLink("<a href=\"battlesequence.php\" class=\"tab\">Battle arena</a>"),
    makeLink("<a href=\"ranking.php\" class=\"tab\">Rankings</a>"),
    makeLink("<a href=\"clanPage.php\" class=\"tab\">Clan</a>"),
    makeLink("<a href=\"profile.php\" class=\"tab\">Profile</a>"),
    makeLink("<a href=\"AboutUs.php\" class=\"tab\">About</a>"),
    makeLink("<a href=\"contactus.php\" class=\"tab\">Contact us</a>")
];

(请注意，您确实希望设置 innerHTML 属性而不是 textContent，因为您要添加 HTML 标记，并且不需要在内容中包含 <li> 或 </li>。 )

显然，您可以通过让函数同时构建 <a> 来优化函数并节省一些输入时间来自 URL 和标签的链接。