基本的 InnerHTML 问题答案

【问题标题】：Basic InnerHTML issue基本的 InnerHTML 问题
【发布时间】：2011-07-13 07:58:42
【问题描述】：

这是我在循环中使用的一段代码，用于将 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 解决方案来解决我的问题，我深表歉意。感谢您的宝贵时间。

【问题讨论】：

标签： javascript html google-chrome-extension innerhtml appendchild

【解决方案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 的位置）。

【讨论】：

【解决方案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;

【讨论】：

【解决方案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 的行。

【讨论】：

有效！非常感谢你，@cynicaloptimist。关于如何通过单击这些链接打开新标签的任何想法？ link.
@schellmax、@Alexander Gyoshev、@The_Butcher、@Erik、@cynicaloptimist。感谢您的时间。我很感激。

【解决方案4】：

这就像改变一样简单

 h1.innerHTML = wordlist[i];

明确你所追求的，即：

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

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

【讨论】：