1

这是我在循环中使用的一段代码，用于将 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 查询）。另外，我希望在单击时在新的 Chrome 选项卡中打开此链接。我该怎么做呢？

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

4

4 回答 4

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;
于 2011-03-11T08:30:03.480 回答
2 
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 的位置）。

于 2011-03-11T08:28:36.157 回答
1

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

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 的行。

于 2011-03-11T08:25:29.647 回答
0

那么它就像改变一样容易

 h1.innerHTML = wordlist[i];

非常适合您的追求，即：

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

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

于 2011-03-11T08:28:13.797 回答