Question

<body>

 <nav>
    <ul>
      <li><a href="index.html">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
 </nav>

 <section>
    <ul>
       <li><a href="previous-page.html">Previous</a></li>
       <li><a href="next-page.html">Next</a></li>
    </ul>
 </section>

</body>

我想选择<li>元素中的<nav>标记内的内容，并将它们放在列表中，但不包括{{1}中的<li>标记}}

我已尝试过此代码，但它会选择整个页面上的所有列表元素：

<section>

我只能使用vanilla JS，而不是jQuery。

Answer 1

实际上是getElementsByTagName ...
但您可以使用.querySelectorAll()之类的：

let list = document.querySelectorAll('nav li')

示例：

let list  = document.querySelectorAll('nav li');
let list2 = document.querySelector('section ul'); // Use rather some ID man 

Array.from(list).forEach( (el) => list2.append(el.cloneNode(true)) );

section {
  background: #eee;
}

<nav>
  <ul>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<section>
  <ul>
    <li><a href="previous-page.html">Previous</a></li>
    <li><a href="next-page.html">Next</a></li>
  </ul>
</section>

Answer 2

我知道你想使用vanilla JavaScript。但是使用jQuery，你可以用更少的代码做同样的事情：

let list = $('nav li');

使用JavaScript选择Children HTML元素

2 个答案: