javascript - 用for循环中的href将<li>节点替换为 anchor

从理论上讲，此代码应将第1-4段写到指向www.bing.ca的链接中，并以第（Number）段为文本。我一直在努力寻找错误，但现在却失败了。任何帮助，将不胜感激。这是我有史以来的第一个问题，因此，如果我可以做得更好，以备将来参考他人，我也将不胜感激。谢谢。

这是代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <script>
  window.onload = function() {
     var innerDiv = document.getElementById("innerDiv");
     var newDiv = document.createElement("div");
     for (var i = 0; i < innerDiv.childNodes.length; i++) {
        var anchor =
           newDiv.appendChild(document.createElement("a"));
        anchor.setAttribute("href", "http://www.bing.ca");
        anchor.text = innerDiv.childNodes[i].textContent;
        newDiv.appendChild(document.createElement("br"));
}
innerDiv.replaceNode(newDiv);
}
</script>
</head>
<body>
   <div id="outerDiv">
      <p class='mainPara'>Main Paragraph</p>
   <ul>
      <li>First List Item</li>
      <li>Second List Item</li>
      <li>Third List Item</li>
      <li>Fourth List Item</li>
   </ul>
   <div id="innerDiv">
      <p class='subPara' id='P1'>Paragraph 1</p>
      <p class='subPara' id='P2'>Paragraph 2</p>
      <p class='subPara' id='P3'>Paragraph 3</p>
      <p class='subPara' id='P4'>Paragraph 4</p>
   </div>
   <table>
   </table>
   <input type="text"/><input type="submit" value="Submit!">
</body>
</html>

最佳答案

请注意，replaceNode仅是IE（http://help.dottoro.com/ljxvjvcg.php）。也许使用innerHTML代替。

var innerDiv = document.getElementById("innerDiv");
var newDiv = document.createElement("div");
for (var i = 0; i < innerDiv.childNodes.length; i++) {
  var anchor =
    newDiv.appendChild(document.createElement("a"));
  anchor.setAttribute("href", "http://www.bing.ca");
  anchor.text = innerDiv.childNodes[i].textContent;
  newDiv.appendChild(document.createElement("br"));
}
innerDiv.innerHTML = newDiv.innerHTML;

<div id="outerDiv">
  <p class='mainPara'>Main Paragraph</p>
  <ul>
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
    <li>Fourth List Item</li>
  </ul>
  <div id="innerDiv">
    <p class='subPara' id='P1'>Paragraph 1</p>
    <p class='subPara' id='P2'>Paragraph 2</p>
    <p class='subPara' id='P3'>Paragraph 3</p>
    <p class='subPara' id='P4'>Paragraph 4</p>
  </div>
  <table>
  </table>
  <input type="text" />
  <input type="submit" value="Submit!">

始终检查控制台是否有错误，或者在浏览器中打开javascript错误进行调试。快速检查您的控制台将显示

TypeError：innerDiv.replaceNode不是函数

这样您就可以很好地自己解决问题。

ReplaceNode

javascript - 用for循环中的href将<li>节点替换为 anchor