Question

我正在努力让孩子成为ul。我试图通过childNodes实现这一目标。然后我迭代节点以向list items的子unordered list添加值。但它没有用。

function getListItem() {
  var list = document.getElementById("list").childNodes;

  for (var i = 0; i < list.length; i++) {
    text = document.createTextNode(i);
    list[i].appendChild(text);
  }

}

<body>
  <ul id="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <button onclick="getListItem()">Submit</button>
</body>

我无法弄清楚即将发生的错误。请帮帮我。

编辑1

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method

Answer 1

使用.childNodes时，它可能会返回空格和换行符。当您打印元素list时，您将获得以下输出：

[text, li, text, li, text, li, text, li, text, li, text]

您看到第一个元素是text而不是li。解决方法可以使用getElementsByTagName('li')。

function getListItem() {

  var list = document.getElementById("list").getElementsByTagName('li');
  console.log(list);
  for (var i = 0; i < list.length; i++) {
    text = document.createTextNode(i);
    list[i].appendChild(text);
  }

}

<body>
  <ul id="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <button onclick="getListItem()">Submit</button>
</body>

希望这有效。

Answer 2

在这种情况下使用children而不是附加孩子。此外，必须在初始声明列表后使用子节点。使用childNodes代替function getListItem() { var list = document.getElementById("list"); var children = list.children for (child in children) { children[child].innerHTML = child; } }来获取行中的每个元素。

<body>
  <ul id="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <button onclick="getListItem()">Submit</button>
</body>

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:nat="http://schemas.datacontract.org/2004/07/xyz.DigitalBanking.Service.Token" xmlns:urn="urn:xyz:ASML:2.0:assertion">
       <soapenv:Header/>
       <soapenv:Body>
          <nat:GetAdfsSAMLFromASML>

             <nat:request>

            <nat:applicationType>secure_inbox</nat:applicationType>
                <nat:department>Internet_Bank</nat:department>
                <nat:firstName>quae divum incedo</nat:firstName>
                <nat:lastName>verrantque per auras</nat:lastName>
                <nat:title>per auras</nat:title>
                <nat:emailaddress>sdd55@BBM.TUX</nat:emailaddress>
                <nat:mejrgeOnAttribute>sdd55@BBM.TUX</nat:mejrgeOnAttribute>
                <nat:ExistingASMLToken>

    </nat:ExistingASMLToken>
             </nat:request>
          </nat:GetAdfsSAMLFromASML>
       </soapenv:Body>
    </soapenv:Envelope>

获取有序列表的子节点时出错

2 个答案: