<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input창 추가하는 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('.add').click(function(){
$('.container').append('<input type="text"><br>')
})
})
</script>
</head>
<body>
<button class="add">추가</button><br>
<div class="container">
<input type="text"><br>
</div>
</body>
</html>더보기
쌤코드(<br>을 사용하고싶지않으면 div태그로 감싸주면 됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input창 추가하는 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#add').click(function(){
var str =
'<div class="inner-box">'+
'<input type="text">'+
'</div>';
$('.box').append(str)
})
})
</script>
</head>
<body>
<button id="add">추가</button><br>
<div class="box">
<div class="inner-box">
<input type="text">
</div>
</div>
</body>
</html>
'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_클래스 관련 메소드 (0) | 2021.06.23 |
|---|---|
| JQ_요소제거(remove, empty) (1) | 2021.06.23 |
| JQ_checkbox 선택을 나열(표시)하기 (0) | 2021.06.23 |
| JQ_radio(성별선택) (0) | 2021.06.23 |
| JQ_사이드 메뉴창 만들기 (1) | 2021.06.23 |