два метода с использованием appendChild, но результат отличается - PullRequest
Новая
       9

два метода с использованием appendChild, но результат отличается

0 голосов
/ 17 ноября 2018

Помощь! Я использую два метода для добавления дочерних узлов внутри узла. Но результаты разные! Два вида кода ниже. enter image description hereenter image description hereenter image description hereenter image description here

первый код: 

<!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>

1 Ответ

0 голосов
/ 17 ноября 2018

Метод appendChild возвращает добавленный узел, в данном случае это текстовый узел.
Затем вы добавляете текстовый узел к ul, который удаляет его из дочернего элемента * 1004.* быть ребенком ul.

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

...