两种方法都使用appendChild，但结果不同

Question

求助！我使用两种方法在节点内添加子节点。但结果却不同！下面是两种代码。

第一个密码：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ulid">
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
        </ul>
        <br/>
        <input type="button" value="添加" onclick="add1();"/>
    </body>
    <script type="text/javascript">
       function add1(){
           var li1 = document.createElement("li")
           var text1 = document.createTextNode("下一个")
           li1.appendChild(text1)
           document.getElementById("ulid").appendChild(li1);
        }
    </script>
</html>

第二个密码：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul id="ulid">
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
        </ul>
        <br/>
        <input type="button" value="添加" onclick="add1();"/>
    </body>
    <script type="text/javascript">
       function add1(){
           var li1 = document.createElement("li").appendChild(document.createTextNode("下一个"))
           document.getElementById("ulid").appendChild(li1);
        }
    </script>
</html>

Answer 1

方法 appendChild returns 添加的节点，在本例中是文本节点。
然后将文本节点追加到 ul，这会将它从 li 的子节点移除为 ul.

的子节点

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#Returns

两种方法都使用appendChild，但结果不同

two method using appendChild, but the result is different

javascript

appendchild