在 for 循环中将 <li> 节点替换为带有 href 的锚点

Question

理论上，此代码应将段落 1-4 写入到 www.bing.ca 的链接中，并以段落（编号）作为文本。几天来我一直在努力寻找错误，但我失败得很惨。任何帮助，将不胜感激。这是我有史以来的第一个问题，所以如果我能把它做得更好以供将来参考其他人，我也会很感激。谢谢。

代码如下：

<!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>

Answer 1

请注意 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 is not a function

而且您本来可以自己解决问题。

在 for 循环中将 <li> 节点替换为带有 href 的锚点

Replace <li> node into anchors with href in for loop

html

javascript

css

href

在 for 循环中将 <li> 节点替换为带有 h​​ref 的锚点

Replace <li> node into anchors with href in for loop

html

javascript

css

href

在 for 循环中将 <li> 节点替换为带有 href 的锚点