这个代码为什么不能实现下面另外一组代码所可以实现的效果


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>chenhao </title>
  </head>
  <body>
    <ul id="list">
        <li>
        苹果
        </li>
        <li>
        香蕉
        </li>
    </ul>
    <ul id="op">
    </ul>
    <button id="btn">点我</button>
    <script>
    var btn=document.querySelector('button');
    btn.onclick=function()
    {
        var item=document.getElementById('list').firstChild;
        var clone=item.cloneNode(true);
        document.getElementById('op').appendChild(clone);
    }
    </script>
  </body>
</html>
不可以实现



```javascript
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <ul id="myList"><li>苹果</li>
      <li>橙子</li>
      <li>橘子</li>
    </ul>
    <ul id="op"></ul>
    <button onclick="myFunction()">点我</button>
    <script>
     function myFunction() {
        var item = document.getElementById('myList').firstChild;
        var cloneItem = item.cloneNode(true);
        document.getElementById('op').appendChild(cloneItem);
      }
    </script>
  </body>
</html>
可以实现

```

第一个ul后面有回车和空格，是会被firstChild获取到的

img

img

获取的是ul和li之间的空格文本，这里文本是第一个子元素；
document.getElementById('list').firstChild


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>chenhao </title>
  </head>
  <body>
    <ul id="list">
        <li>
        苹果
        </li>
        <li>
        香蕉
        </li>
    </ul>
    <ul id="op">
    </ul>
    <button id="btn">点我</button>
    <script>
    var btn=document.querySelector('button');
    btn.onclick=function()
    {
        var item=document.getElementById('list').firstChild;
        var clone=item.cloneNode(true);
        document.getElementById('op').appendChild(clone);
    }
    </script>
  </body>
</html>

由于ul和li之间没有文本，紧挨着，所以第一个元素是li

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <ul id="myList"><li>苹果</li>
      <li>橙子</li>
      <li>橘子</li>
    </ul>
    <ul id="op"></ul>
    <button onclick="myFunction()">点我</button>
    <script>
     function myFunction() {
        var item = document.getElementById('myList').firstChild;
        var cloneItem = item.cloneNode(true);
        document.getElementById('op').appendChild(cloneItem);
      }
    </script>
  </body>
</html>

li标签之间有换行，会被认为是文本标签，获取到的firstChild是换行文本
var item = document.getElementById('list').firstElementChild;

document.getElementsByTagName('button')或document.getElementById('btn')

img

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/firstChild

你这两行都无法实现将myList里面的li放到op里面，把中间这行去掉之后，两个示例都可以实现

        var cloneItem = item.cloneNode(true);