为什么当我在 Div 中使用 append.Child return 时我为空，但当我将它放在 body 中时却有效？

Question

出于某种原因，我的代码不起作用。当我试图查看控制台会 return 我时，它会在 return 给我时给出我想要的答案："Uncaught TypeError: Cannot read property 'appendChild' of null" 当我对 Div 做同样的事情时。

这是我的代码，请帮助我...

function addOnePropertie () {
    var theUl = document.createElement ("UL");
    var theText = document.createTextNode ("This is a paragraph.");
    theUl.appendChild (theText);
    document.getElementById('theUlDiv').appendChild (TheUl); 
}

<div class="divOne">
    <header>
        Sign Up an Object
    </header>

    <ul>
        <span class="spanObject"> Name of Object: </span>
        <input placeholder="Type any Name...">
    </ul>
        <hr class="inDiv">
    <ul>
        <span class="spanObject"> Name plus Value of Propertie One: </span>
        <input class="smallInput" placeholder="Name of Propertie..."> 
        <input class="smallInput" placeholder="Value of Propertie">
    </ul>
    <div id="theUlDiv">
    </div>
    <button class="addPropertie" onclick="addOnePropertie ();">
        Add a Propertie 
        <i class="material-icons" style="color: blue; font-size: 15px;"> 
            note_add 
        </i>
    </button>
</div>

如你所见，如果我 console.log (theUl) 它 return 就是我想要的新 Ul 元素，如果我尝试将它放入 document.body.appendChild (theUl) 中也是如此，但如果我这样做在 div 它不起作用，请帮帮我 :D

Answer 1

调试方法是，尝试在浏览器控制台中查询元素 document.getElementById('theUlDiv')，您会发现它 return 为 null，因为您的标记没有带有 id='theULDiv' 的元素可以使用 document.getElementsByClassName('theUlDiv')[0] 或更改您的标记以将 id 添加到元素。 编辑： 在 appendChild 方法中的这一行 .appendChild (TheUl); 中还有另一个错误，您正在传递一个未定义的变量。你的实际变量是 theUl 但你有资本 'T'

Answer 2

因为在你的html中没有id是'theUlDiv'的元素。

为什么当我在 Div 中使用 append.Child return 时我为空，但当我将它放在 body 中时却有效？

Why does append.Child return me null when I use it in a Div but works when I put it on the body?

html

javascript

css

append

appendchild