JavaScript 未能在 'Node' 参数 1 上执行 'appendChild' 不是 'Node' 类型答案

【问题标题】：JavaScript failed to execute 'appendChild' on 'Node' parameter 1 is not of type 'Node'JavaScript 未能在 'Node' 参数 1 上执行 'appendChild' 不是 'Node' 类型
【发布时间】：2016-11-24 22:18:29
【问题描述】：

这个想法是，当屏幕低于 800 像素时，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 failed to execute 'appendChild' on 'Node' parameter 1 is not of type 'Node'”

【问题讨论】：

赋值表达式返回 questLinks 数组中每个属性的赋值，因此它们不是节点或 HTML 元素

标签： javascript html

【解决方案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>。 )

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：