javascript - 使用 JQuery 和 Javascript 添加到 HTML 列表

Question

我有一些 javascript，我想在单击按钮时执行并更改列表元素:

<button id="click-me" type="button">
     <img  src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png" alt="Add to Event" style="width: 50px"/>
</button>

<div>
   <p>Meeting Participants:</p>
   <ol id ="list">

   </ol>
</div>

Javascript/JQuery:

var List = document.getElementById('list');

$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();

        document.getElementById('list').style.backgroundColor = "green";
        var entry = document.createElement("li");
        var testText = document.createTextNode("test")
        entry.appendChild(testText);
        List.appendChild(entry);

        return false;

    });
});

背景色成功变绿，但是看不到要添加的列表元素。为什么我的代码不起作用？谢谢

Answer 1

只需将 List 初始化放在点击事件处理程序中

$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();

        var List = document.getElementById('list');
        document.getElementById('list').style.backgroundColor = "green";
        var entry = document.createElement("li");
        var testText = document.createTextNode("test")
        entry.appendChild(testText);
        List.appendChild(entry);

        return false;

    });
});