创建元素节点、设置其属性并附加元素？答案

【问题标题】：Creating an element node, setting its attributes, and appending the element?创建元素节点、设置其属性并附加元素？
【发布时间】：2020-03-05 11:42:52
【问题描述】：

我被指示为链接元素创建一个元素节点并将其 rel 属性设置为“styleSheet”，将其 id 属性设置为“fancySheet”，并将其href 属性为“na_style_num.css”（其中 num 是 styleNum 变量的值）。

然后它要我将 fancySheet 样式元素附加到文档头部。

我觉得自己好像真的在这里很近或很远。这是我没有运气的尝试：

na_styler.js：

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleNum = document.createElement("link");
   styleNum.setAttribute("rel", "stylesheet");
   styleNum.setAttribute("id", "fancySheet");
   styleNum.setAttribute("href", "na_style_" + styleNum + .css);
   document.head.appendChild(styleNum);
}

我收到了一些错误，但问题是它是以我无法真正理解的形式编写的。例如：

" Traceback（最近一次调用最后一次）：文件“nt-test-3ed2ebdf.py”，第 14 行，在 assert(link.get_attribute('id') == 'fancySheet') 中，'id 属性应设置为“fancySheet”。实际："' + str(link.get_attribute('id')) + '"' AssertionError：id 属性应设置为“fancySheet”。实际："""

【问题讨论】：

在这一行 styleNum.setAttribute("href", "na_style_" + styleNum + .css); 中错过了 .css 的引号

标签： javascript html appendchild createelement

【解决方案1】：

您为两个变量使用了相同的名称。因为它们是用var 声明的，所以它不会抛出错误。第二个将覆盖第一个。

只需更改其中一个变量的名称

还将.css 包装在"" 中

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleElm = document.createElement("link");
   styleElm.setAttribute("rel", "stylesheet");
   styleElm.setAttribute("id", "fancySheet");
   styleElm.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleElm);
}

【讨论】：

请停止向 cmets 提出反对意见。这些 cmets 只是噪音。如果投反对票的人想提供更详细的解释，他们会这样做的。他们选择不这样做，这完全没问题。他们永远不会看到你的 cmets。

【解决方案2】：

在styleNum.setAttribute("href", "na_style_" + styleNum + .css); 行中，将.css 括在引号中，因为它是字符串而不是变量名。

styleNum.setAttribute("href", "na_style_" + styleNum + '.css');

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleEle = document.createElement("link");
   styleEle.setAttribute("rel", "stylesheet");
   styleEle.setAttribute("id", "fancySheet");
   styleEle.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleNum);
}

【讨论】：

【解决方案3】：

随机生成的数字意味着存储在与元素节点分开的变量中。由于您使用 styleNum 作为两个变量的名称，首先将生成一个随机数并将其存储在 styleNum 中，然后将创建新的元素节点并在随机生成的数字上方，现在由于变量无法存储而永远丢失两个不同的值。为避免这种情况并保留随机数以供稍后在函数中使用，您必须将正在创建的元素节点命名为 styleNum 以外的任何名称

这是避免这种情况的代码示例：

function setStyles() {
   var styleNum = randInt(5);
   var styleElementNode = document.createElement("link");
   styleElementNode.setAttribute("rel", "stylesheet");
   styleElementNode.setAttribute("id", "fancySheet");
   styleElementNode.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleElementNode);
}

还要注意我是如何在.css 周围添加" " 并在最后一行的函数参数中将styleNum 更改为styleElementNode。这是因为该函数旨在将创建的元素节点而不是随机生成的数字附加到文档头部。

【讨论】：