Question

我真的想很好地理解DOM，尤其是遍历DOM。我有一个带有表单的简单html表，可以帮助您理解。我的表的ID为“ myTbl”，空div的ID为“ myDiv”。我想将“ myTbl”的子级渲染为“ myDiv”，但是它没有按我期望的那样工作。我收到错误消息“ 无法读取null的属性'appendChild'”，这非常令人沮丧。请帮助。谢谢！

var myTbl = document.getElementById("myTbl");
var myDiv = document.querySelector("myDiv");

myDiv.appendChild(myTbl.childNodes);

<table border=1 id="myTbl">
  <tr>
    <td>Name of Requestor&nbsp;&nbsp;<input type="text"></td>
    <td>Request Date<input type="text"></td>
  </tr>
  <tr>
    <td>Installation Assigned<input type="radio" id="loc1"><input type="radio" id="loc2"></td>
    <td>State/Country<input type="text"></td>
  </tr>
  <tr>
    <td>Employer<input type="text"></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" value="Submit"></td>
  </tr>
</table>

<div id="myDiv"></div>

这是小提琴：https://jsfiddle.net/isogunro/fzLy42ns/5/

Answer 1

您用于myDiv的选择器是错误的，它必须选择一个ID，因此请使用.getElementById("myDiv")或.querySelector("#myDiv")。

另一个问题是，您需要分别附加每个元素。

var myTbl = document.getElementById("myTbl");
var myDiv = document.getElementById("myDiv");

var childs = Array.from(myTbl.childNodes);
childs.forEach(c => myDiv.appendChild(c));

<table border=1 id="myTbl">
  <tr>
    <td>Name of Requestor&nbsp;&nbsp;<input type="text"></td>
    <td>Request Date<input type="text"></td>
  </tr>
  <tr>
    <td>Installation Assigned<input type="radio" id="loc1"><input type="radio" id="loc2"></td>
    <td>State/Country<input type="text"></td>
  </tr>
  <tr>
    <td>Employer<input type="text"></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" value="Submit"></td>
  </tr>
</table>

<div id="myDiv"></div>

childNodes没有追加到父节点

1 个答案: