基本的 InnerHTML 问题

Question

这是我在循环中使用的一段代码，用于将 HTML 元素附加到 Google Chrome 扩展程序的 popup(.html)：

• “wordlist”是一个单词数组。
• 'rand' 是随机数生成函数。

代码：

for (l=1; l<11; l++) { 
    var i = rand(wordlist.length;
    var h1 = document.createElement("h1");  
    h1.innerHTML = wordlist[i];
    document.body.appendChild(h1);
}

没有预先存在的 HTML 元素。因此，此代码将 10 个随机单词附加到空白页。

现在，我想将链接附加到页面，而不是附加到页面的单词（例如：http://dictionary.reference.com/browse/**wordlist[i]** ，这基本上是该特定单词的 Dictionary.com 查询）。另外，我希望在

PS：我前一天开始学习 HTML 和 JS，我太兴奋了，无法开始编写一些代码。如果我忽略了一个简单的 Google 解决方案来解决我的问题，我深表歉意。感谢您抽出时间。

Answer 1

for (l=1; l<11; l++) { 
    var i = rand(wordlist.length);
    var a = document.createElement("a");  
    a.setAttribute('href', 'http://dictionary.reference.com/browse/'.wordlist[i]);
    a.setAttribute('target', '_blank');
    h1.innerHTML = wordlist[i];
    document.body.appendChild(a);
}

基本上只需将 h1 更改为 a 即可。
还要设置属性 href（链接）和 target（应为 openend）。

Answer 2

如果您想使用 DOM，

for (l=1; l<11; l++) { 
    var i = rand(wordlist.length;
    var a = document.createElement("a");
    a.href = "http://dictionary.reference.com/browse/" + wordlist[i];
    a.appendChild(document.createTextElement(wordlist[i]));
    document.body.appendChild(h1);
}

下面的代码会更快，因为您只需附加 HTML 一次（并且 DOM 操作的成本很高）：

var html = "";
for (l=1; l<11; l++) { 
    var i = rand(wordlist.length);
    html += "<a href='http://dictionary.reference.com/browse/" + wordlist[i] + "'>"
                + wordlist[i]
          + "</a>";
}
document.body.innerHTML += html;

Answer 3

尝试将代码更改为以下内容：

for (l=1; l<11; l++) { 
  var i = rand(wordlist.length);
  var a = document.createElement("a");  
  a.innerHTML = wordlist[i];
  a.href = "http://dictionary.reference.com/browse/" + wordlist[i];
  document.body.appendChild(a);
}

我修复了第 2 行中的问题，您省略了右括号。
我还更明显地将你的 h1 更改为 a，并添加了一行设置其 href 的行。

Answer 4

嗯，它就像更改

 h1.innerHTML = wordlist[i];

为您想要的一样简单，即：

 h1.innerHTML = "<a href='http://dictionary.reference.com/browse/"+wordlist[i]+"' target='_blank'>"+wordlist[i]+"</a>";

要使其在新选项卡中打开，您必须添加属性“目标”并为其指定空白值。我认为它在 HTML 5 中已被弃用......