<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>append() - 선택된 요소의 자식 중 마지막에 추가</h5>
        <button type="button" onclick="appendJs()">js로 바꾸기</button>
        <button type="button" onclick="appendJquery()">jquery로 바꾸기</button>
//요소 추가하기 - 위해서는 기준이 있어야함
//append()

function appendJs() {
    let ul = document.querySelector('.colors'); //기준점 가져옴
    let li = document.createElement('li');
    li.textContent = '마지막으로 추가된 js';
    ul.append(li);
}
function appendJquery() {
    $('.colors').append('<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.