Question

这是我在循环中使用的一段代码，用于将HTML元素附加到Google Chrome扩展程序的弹出窗口（.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查询）。此外，我希望在点击时在new Chrome tab中打开此链接。我该怎么做？

P.S ：我前一天开始学习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（链接）和目标（它应该在哪里开放）。

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

要在新标签页中打开它，您必须添加属性“target”并将其值设为空白。我认为它在HTML 5中被弃用了，但是......

基本的InnerHTML问题

4 个答案: