Question

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

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;
		}

	}
}

此代码导致错误：“未能在'Node'参数1上执行'appendChild'的JavaScript不属于'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>或{内容中的{1}}。

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

Answer 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
})

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

2 个答案: