반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="text_add"/>
<input type="button" id="btn_add" onclick="action_add()" value="추가"/>
<ul id="ul_list">
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
<li>딸기</li>
<li>망고</li>
<ul>
<script type="text/javascript">
var myDiv = document.querySelector(".test");
var myH1 = myDiv.querySelector("h1");
console.log(myDiv);
console.log(myH1);
function action_add(){
var text_add = $("#text_add").val(); //입력할 글씨
var ul_list = $("#ul_list"); //ul_list선언
ul_list.append("<li>"+text_add+"</li>"); //ul_list안쪽에 li추가
}
</script>
</body>
</html>
반응형
'js > 제이쿼리' 카테고리의 다른 글
| this 해당 객체 (0) | 2021.09.15 |
|---|---|
| 제이쿼리를 이용한 멀티 리스트 업데이트(다중) (0) | 2021.07.09 |
| 객체의 부모 노드에 접근, 자식노드에 접근 (0) | 2021.03.31 |
| 제이쿼리 선택자 (0) | 2021.02.23 |
댓글