js+jq

by qwerew0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div id="wrap">
	<h1>탐색 선택자 및 html조작</h1>
	<h2>탐색 선택자</h2>
	<ul id="list1">
		<li>리스트1</li>
		<li>리스트2</li>
		<li>리스트3</li>
		<li>리스트4</li>
		<li>리스트5</li>
		<li>리스트6</li>
		<li>리스트7</li>
	</ul>
	<ul id="list2">
		<li>리스트8</li>
		<li class="theObj">리스트9</li>
		<li><span>리스트10</span></li>
		<li>리스트11</li>
		<li><a href="#">리스트12</a></li>
		<li>리스트13</li>
		<li>리스트14</li>
	</ul>

	<h2 class="theTitle">html 조작</h2>
	<ul id="list3">
		<li class="obj1">list_2</li>
		<li>list_3</li>
		<li>list_4</li>
		<li>list_5</li>
	</ul>
</div>

CSS

.a0{background:yellow;}
.a1{background:red;}
.a2{background:blue;}
.a3{background:pink;}
.a4{background:skyblue;}

JavaScript

let list1=$("#list1>li");

list1.each((idx,el)=>{
	$(el).text(idx+"aaa")
	$(el).addClass("a"+idx);
})

let list2=$(".theObj");
list2.html("<span>"+Math.random()+"<span>")
list2.attr("data-set","accessbillity")
console.log(list2.attr("class"))


var list3 = $('#list3');
list3.append('<li>🎨추가한list_6</li>'); 
list3.prepend('afterbegin', '<li>🎨list_1</li>');
var list3Li = $('#list3 li');
list3Li.eq(4).before('beforebegin', '<li>🎨insertBefore</li>');
list3Li.eq(5).after('afterend', '<li>🎨insertAfter</li>');