해당 노드를 jQuery를 이용하여 수정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
console.log($("ul.menu").html());
// 태그 내의 포함된 텍스트 노드를 읽어온다.
console.log($("ul.menu").text());
var $menuList = $("ul.menu li");
$menuList.click(function () {
$(this).html("<li><a href='https://www.daum.net'>daum</a></li>");
// $(this).text("new menu");
});
});
</script>
</head>
<body>
<input type="button" id="ok" value="노드내용확인">
<ul class="menu">
<li id="menu1">Menu#1</li>
<li id="menu2">Menu#2</li>
<li id="menu3" class="select">Menu#3(class = "select")</li>
<li id="menu4">Menu#4</li>
<li id="menu5">Menu#5</li>
</ul>
</body>
</html>
728x90
반응형
'HTML > jQuery 기초' 카테고리의 다른 글
| [jQuery] 해당 스타일 jQuery를 이용하여 변경하기 (0) | 2020.08.04 |
|---|---|
| [jQuery] 노드 추가, 수정, 삭제, 이동 실습 (0) | 2020.08.04 |
| [jQuery] 노드 삭제하기 (0) | 2020.08.04 |
| [jQuery] 노드 움직이기 (0) | 2020.08.04 |
| [jQuery] 노드 추가하기 (0) | 2020.08.03 |
