[英]How do I output a JavaScript array index value as text value in to an html a-tag?
我想要 26 页，每页包含一个字母，但我不确定如何将索引值作为 HTML 文本值传递。 我的文件夹中有 26 个单独的页面，标题为 x-page.html
<!DOCTYPE html>
<head>
<title>The Alphabet</title>
</head>
<body>
<h1> This is the main page. </h1>
<div> These are the letters in the alphabet. </div>
<a href="a-page.html">[i]</a>
<a href="b-page.html">[i]</a>
<a href="c-page.html">[i]</a>
<a href="d-page.html">[i]</a> <br>
<a href="e-page.html">[i]</a>
<a href="f-page.html">[i]</a>
<a href="g-page.html">[i]</a>
</body>
<script>
let alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p']
for(i=0; i<16; i++){
console.log(alphabet[i]);
}
</script>
</html>
一种选择是在for循环中使用createElement然后appendChild 。
let alphabet = ['a','b','c','d','e']; // etc for(i=0; i < alphabet.length; i++){ const link = document.createElement('a'); link.setAttribute('href', alphabet[i] + '-page.html'); link.innerHTML = alphabet[i]; document.body.appendChild(link); }
<body> <h1> This is the main page.</h1> <div> These are the letters in the alphabet. </div> </body>
我希望你正在尝试这样做 - 你可以遍历你的字母表并使用 i + 1 来显示数字，因为数组索引从 0 开始。
<.DOCTYPE html> <head> <title>The Alphabet</title> </head> <body> <h1> This is the main page. </h1> <div> These are the letters in the alphabet, </div> <div id="links"></div> </body> <script> let alphabets = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p';'q']; let links = ''; for(i=0. i < alphabets;length. i++){ links += ` <a href="${alphabets[i]}-page.html">${i + 1}</a>` } document.getElementById("links");innerHTML = links; </script> </html>
你想要这样的东西，
let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p'] const target = document.getElementById('target') alphabet.forEach((v, i) => { target.insertAdjacentHTML('beforeend', `<a href="${v}-page.html">${i}</a><br>`) })
<.DOCTYPE html> <head> <title>The Alphabet</title> </head> <body> <h1> This is the main page. </h1> <div> These are the letters in the alphabet. </div> <div id="target"></div> </body> </html>
let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p'] const target = document.getElementById('target') alphabet.forEach((v, i) => { const el = document.createElement('a') el.href = v + '-page.html' el.innerText = i + 1; target.appendChild(el) })
<.DOCTYPE html> <head> <title>The Alphabet</title> </head> <body> <h1> This is the main page. </h1> <div> These are the letters in the alphabet. </div> <div id="target"></div> </body> </html>
使用appendChild创建element ，然后将其 append 到父级
alphab=document.getElementById("alphab") let alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'] for(i=0; i<16; i++){ a=document.createElement("a") char=alphabet[i] a.href=`${char}+"-page.html"` a.innerHTML=`${i} ` alphab.appendChild(a) }
<.DOCTYPE html> <head> <title>The Alphabet</title> </head> <body> <h1> This is the main page. </h1> <div id="alphab"> </div> </body> </html>
您可以通过 forEach 循环运行数组。 在数组的每个循环中，为 a 标签创建一个元素，将其显示设置为块，使用每个值的值创建一个 textNode，定义链接 http 并将其属性设置为 href 到您定义的链接。 最后 append 元素到您的显示内容节点。
let abet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p']; let div = document.getElementById('cont'); abet.forEach(function(value){ let aTag = document.createElement('a'); aTag.style.display = 'block'; let aTagText = document.createTextNode(value); let link = 'http://somesite.org/' + value; aTag.setAttribute('href', link); aTag.appendChild(aTagText); div.append(aTag); })
<h1> This is the main page. </h1> <div> These are the letters in the alphabet. </div> <div id="cont"> </div>
如何更改文字的值 <input> 标签sung javascript
[英]How do I change the text value of an <input> tag sung javascript
如果某个值存在于某个数组索引处，我如何检查 JavaScript？
[英]How do I check in JavaScript if a value exists at a certain array index?
Javascript：如何从索引为0的数组中拼接一个值？
[英]Javascript: How do I splice a value from an array with an index of 0?
在JavaScript中，如何使它悬停在标签上并在ap标签中输出单选按钮的值？
[英]In JavaScript, how do I make it so hovering over the label will output in a p tag the value of the radio button?
如何从一秒钟内获取文本值<tr>用 javascript 标记
[英]How do I get the text value from a second <tr> tag with javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.