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

<ul class="colors">
            <li class="orange">orange</li>
            <li class="green">green</li>
            <li class="navy">navy</li>
        </ul>
<h5>before(), after()- 선택된 요소의 이전과 직후에 추가</h5>
        <button type="button" onclick="beforeJs()">js로 바꾸기</button>
        <button type="button" onclick="beforeJquery()">jquery로 바꾸기</button>
        <button type="button" onclick="afterJs()">js로 바꾸기(after)</button>
        <button type="button" onclick="afterJquery()">jquery 바꾸기(after)</button>
//before, after

function beforeJs() {
    let green = document.querySelector('.green');
    let li = document.createElement('li');
    li.textContent = '추가된 js';
    green.before(li);
}
function beforeJquery() {
    $('.navy').before('<li>추가된 jQuery</li>');
}

function afterJs() {
    let navy = document.querySelector('.navy');
    let li = document.createElement('li');
    li.textContent = '추가된 js';
    navy.after(li);
}
function afterJquery() {
    $('.orange').after('<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.