Javascript getAttribute（）和setAttributeNode（）存在问题

最近，我创建了我的第一个Python库htam。所以，现在我尝试创建一个HTML页面来练习HTML、CSS和JavaScript，显示所有htam更新。 为了生成更高效的代码，我尝试使用JavaScript for循环为每个htam版本创建一个内部链接

在我的HTML文件中，我有：

<p id = "versions">
    <script src = "main.js"></script>
</p>

var h = 'htam ';
var versions = [
    '1.2.2',
    '1.2.0',
    '1.1.0',
    '1.0.4',
    '1.0.1',
    '1.0.0'
]

for (var i = 0; i < versions.length; i++) {
    document.write("<strong>>>></strong> ")

    var newa = document.createElement("a");
    var att = document.createAttribute("href")
    var atext = document.createTextNode(h + versions[i]);

    att.value = "#" + versions[i]

    newa.appendChild(atext);
    newa.getAttribute(att);

    var element = document.getElementById("versions");
    element.appendChild(newa);
    element.getAttribute(att)

    document.write("<br>")
}

在main.js文件中，我有：

<p id = "versions">
    <script src = "main.js"></script>
</p>

var h = 'htam ';
var versions = [
    '1.2.2',
    '1.2.0',
    '1.1.0',
    '1.0.4',
    '1.0.1',
    '1.0.0'
]

for (var i = 0; i < versions.length; i++) {
    document.write("<strong>>>></strong> ")

    var newa = document.createElement("a");
    var att = document.createAttribute("href")
    var atext = document.createTextNode(h + versions[i]);

    att.value = "#" + versions[i]

    newa.appendChild(atext);
    newa.getAttribute(att);

    var element = document.getElementById("versions");
    element.appendChild(newa);
    element.getAttribute(att)

    document.write("<br>")
}

var h='htam'；
变量版本=[
'1.2.2',
'1.2.0',
'1.1.0',
'1.0.4',
'1.0.1',
'1.0.0'
]
对于（变量i=0；i>”）
var newa=document.createElement（“a”）；
var att=document.createAttribute（“href”）
var atext=document.createTextNode（h+versions[i]）；
att.value=“#”+版本[i]
newa.appendChild（atext）；
newa.getAttribute（att）；
var元素=document.getElementById（“版本”）；
元素。追加子元素（newa）；
element.getAttribute（att）
文档。写入（“
”）
}

此代码打印

这就是我想要的，但是这些链接是不可点击的

因此，我用setAttributeNode（）更改了getAttribute（）：

var h='htam'；
变量版本=[
'1.2.2',
'1.2.0',
'1.1.0',
'1.0.4',
'1.0.1',
'1.0.0'
]
对于（变量i=0；i>”）
var newa=document.createElement（“a”）；
var att=document.createAttribute（“href”）
var atext=document.createTextNode（h+versions[i]）；
att.value=“#”+版本[i]
newa.appendChild（atext）；
newa.setAttributeNode（附件）；
var元素=document.getElementById（“版本”）；
元素。追加子元素（newa）；
元素setAttributeNode（附件）
文档。写入（“
”）
}

这张照片

这是一个可点击且运行良好的内部链接，但它只打印列表中的第一个对象

---

如果没有所有可单击的链接，如何获得第一个结果？

问题在于调用

元素。setAttributeNode（att）

。

Attr

只能添加到一个元素中；尝试将同一属性添加到另一个元素会导致错误，脚本将停止

首先，无需将

href

属性添加到

versions

元素中。它只在

a

上需要。删除此不必要的呼叫，您将获得所有链接

var h='htam'；
变量版本=[
'1.2.2',
'1.2.0',
'1.1.0',
'1.0.4',
'1.0.1',
'1.0.0'
]
对于（变量i=0；i>”）
var newa=document.createElement（“a”）；
var att=document.createAttribute（“href”）
var atext=document.createTextNode（h+versions[i]）；
att.value=“#”+版本[i]
newa.appendChild（atext）；
newa.setAttributeNode（附件）；
var元素=document.getElementById（“版本”）；
元素。追加子元素（newa）；
文档。写入（“
”）
}

版本

问题在于调用

元素。setAttributeNode（att）

。

Attr

只能添加到一个元素中；尝试将同一属性添加到另一个元素会导致错误，脚本将停止

首先，无需将

href

属性添加到

versions

元素中。它只在

a

上需要。删除此不必要的呼叫，您将获得所有链接

var h='htam'；
变量版本=[
'1.2.2',
'1.2.0',
'1.1.0',
'1.0.4',
'1.0.1',
'1.0.0'
]
对于（变量i=0；i>”）
var newa=document.createElement（“a”）；
var att=document.createAttribute（“href”）
var atext=document.createTextNode（h+versions[i]）；
att.value=“#”+版本[i]
newa.appendChild（atext）；
newa.setAttributeNode（附件）；
var元素=document.getElementById（“版本”）；
元素。追加子元素（newa）；
文档。写入（“
”）
}

版本

并不是说您真的应该在HTML中转义像

这样的字符，因为HTML本身就使用这些字符。大多数HTML解析器都会做正确的事情，但由于编写

而不是

很容易，因此您也可以这样做。另外，避免

document.write

，特别是避免将

document.write

和

document.createElement

混合使用。更喜欢后者。不是说你真的应该在HTML中转义像

这样的字符，因为HTML本身就使用这些字符。大多数HTML解析器都会做正确的事情，但由于编写

而不是

很容易，因此您也可以这样做。另外，避免

document.write

，特别是避免将

document.write

和

document.createElement

混合使用。更喜欢后者。您甚至可以进一步简化，只需设置

href

属性

newa.href=“#”+versions[i]而不是处理属性节点；渲染结果将是相同的。您甚至可以进一步简化，只需设置
href
属性
newa.href=“#”+versions[i]而不是处理属性节点；渲染结果将是相同的。