Добавление в список HTML с помощью JQuery и Javascript

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; 

    }); 
}); 

Answer 2

Реализация JQuery, как вы уже используете библиотеку:

$(function(){ 
    $("#click-me").click(function (e){ 
     $('#list').prepend('<li>test</li>').css('background-color', 'green'); 
     return false; 
    }); 
}); 

https://jsfiddle.net/nc9guq2r/