append

js/제이쿼리
append

멋진 개구리 2021. 2. 15. 13:38
<!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>