[JS][Jquery] 스크립트를 이용해서 동적인 버튼 만들기 +버튼 누르면 버튼10개 생성

스크립트를 이용해서 동적인 버튼 만들기

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>