WEB/JavaScript
[JS][Jquery] 스크립트를 이용해서 동적인 버튼 만들기 +버튼 누르면 버튼10개 생성
애플쩀
2022. 5. 23. 10:52
스크립트를 이용해서 동적인 버튼 만들기
1번째 방법
<script type="text/javascript">
//버튼을 생성
var btn=document.createElement("button");
btn.innerText="버튼3";
btn.textContent="버튼2";
//생성된 버튼을 boidy 요소의 자식으로 추가
document.body.appendChild(btn);
</script>
2번째 방법
<script type="text/javascript">
//버튼을 생성
var btn=document.createElement("button");
var txtNode=document.createTextNode("버튼4");
btn.appendChild(txtNode);
/* btn.innerText="버튼3"; */
/* btn.textContent="버튼2"; */
//생성된 버튼을 boidy 요소의 자식으로 추가
document.body.appendChild(btn);
</script>
버튼 누르면 버튼10개 생성
<button id="btn1">버튼</button>
<script type="text/javascript">
document.querySelector("#btn1").onclick=function(){
for (var i = 1; i < 10; i++) {
//버튼을 생성
var btn=document.createElement("button");
var txtNode=document.createTextNode("버튼-"+(i+1));
btn.appendChild(txtNode);
//생성된 버튼을 body 요소의 자식으로 추가
document.body.appendChild(btn);
}
};
p태그 밑에 넣고, 밑으로 10개 버튼 추가
<button id="btn1">버튼</button>
<p id="demo"></p>
<script type="text/javascript">
document.querySelector("#btn1").onclick=function(){
var pelemt=document.querySelector("#demo");
for (var i = 1; i < 10; i++) {
//버튼을 생성
var btn=document.createElement("button");
var txtNode=document.createTextNode("버튼-"+(i+1));
btn.appendChild(txtNode);
//생성된 버튼을 p요소의 자식으로 추가
pelemt.appendChild(btn);
//개행 추가
pelemt.appendChild(document.createElement("br"));
}
};
</script>
jquery 이용
<script type="text/javascript">
$("#btn1").click(function(event){
for (var i = 0; i <10; i++) {
$("#demo").append($("<button>버튼"+(i+1)+"</button>")).append($("<br>"));
}
});
</script>