<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<h4>요소 추가하기</h4>
        <ul class="colors">
            <li class="orange">orange</li>
            <li class="green">green</li>
            <li class="navy">navy</li>
        </ul>

 <h5>prepend() - 선택된 요소의 자식 중 처음에 추가</h5>
        <button type="button" onclick="prependJs()">js로 바꾸기</button>
        <button type="button" onclick="prependJquery()">jquery로 바꾸기</button>
        
//prepend()

function prependJs() {
    let ul = document.querySelector('.colors'); //기준점 가져옴
    let li = document.createElement('li');
    li.textContent = '처음으로 추가된 js';
    ul.prepend(li);
}
function prependJquery() {
    $('.colors').prepend('<li>처음으로 추가된 jquery</li>');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.