javascript/jquery를 사용하여 div를 동적으로 생성

Question

"answerdiv 1"& "answerdiv 2"라는 HTML 코드가 두 개 있습니다.

이제 "answerdiv 3" "answerdiv 4" "answerdiv 5"등과 같이 고유하게 div id를주고 싶습니다.

javascript/jquery를 사용하면 동적으로 생성 된 div에 고유 한 ID를 추가 할 수 있습니까?

내 프로젝트 사용자는 "n"개의 숫자를 더할 수 있습니다. 엄격한 제한이 없습니다.

도와주세요.

교수실

에서

감사 ======================================= =========================

내 HTML 코드는 :

<div id="answertextdiv"> 
    <textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea> 
</div> 

내 JS 코드 :

function exchangeLabelsanswertxt(element) 
{ 
    var result = $(element).val(); 
    if(result!="") 
    { 
     $(element).remove(); 
     $("#answertextdiv").append("<label id='answertext' onClick='exchangeFieldanswertxt(this);'>"+result+"</label>"); 
    } 
} 
function exchangeFieldanswertxt(element) 
{ 
    var result = element.innerHTML; 
    $(element).remove(); 
    $("#answertextdiv").append("<textarea id='answertext' name='answertext' placeholder='Type answer here' rows='2' cols='40' tabindex='6' onBlur='exchangeLabelsanswertxt(this);'>"+result+"</textarea>"); 
} 

이제 위의 코드에서 나는 독특한 "answertextdiv"ID에있는 모든 물건을 추가하고 싶습니다.

Answer 1

div의 수와 함께 자바 스크립트에서 "전역 변수"를 유지해야하며 div를 만들 때마다 그 값이 증가합니다. 예제 코드 :

<script type="text/javascript"> 
    var divCount = 0; 

    function addDiv(parentElement, numberOfDivs) { 
    for(var i = 0; i < numberOfDivs; i++) { 
     var d = document.createElement("div"); 
     d.setAttribute("id", "answerdiv"+divCount); 
     parentElement.appendChild(d); 
     divCount++; 
    } 
    } 
</script> 

그리고 jQuery를 자바 스크립트에서 일을 많이 할 필요가 없습니다 것을 명심하시기 바랍니다. 그것은 당신이 "적게 쓰고 더 많이"하는 데 도움이되는 도서관 일뿐입니다.

Answer 2

명시 적 또는 암시 적으로 ID를 생성하려면 전역 카운터 (일반적으로 고유 ID 생성기)가 필요합니다 (예 : 생성 된 div의 마지막을 선택하는 것, 클래스 또는 ID 접두어로 식별) .

<div id="container"> 
    <div id="answerdiv 1"></div> 
    <div id="answerdiv 2"></div> 
</div> 

당신이 뭔가를 할 수 있습니다 : 당신의 div의이 같은 컨테이너에있는 경우

다음

var newdiv = null; // replace by div-generating code 
$(newdiv).attr('id', 'answerdiv' + global_counter++); 
$("#parent").append(newdiv); // or wherever 

Answer 3

을 시도

//Call this whenever you need a new answerdiv added 
var $container = $("container"); 
$container.append('<div id="answerdiv ' + $container.children().length + 1 + '"></div>'); 

가능하다면, 글로벌 사용하지 않으려 변수 ... 그들은 결국 당신을 물지 않기 위해 돌아올 것이고 당신은이 경우에 전역 변수를 필요로하지 않을 것입니다.

Answer 4

고유 ID를 사용하여 div를 만들 수 있습니다.다음은 HTML

<input type="button" value="Insert Div" onClick="insertDiv()" /> 
<div class="container"> 
<div id="answerdiv-1">This is div with id 1</div> 
<div id="answerdiv-2">This is div with id 2</div> 
</div> 

자바 스크립트

var i=2; 
function insertDiv(){ 

    for(i;i<10;i++) 
    { 
     var d_id = i+1; 



     $("<div id='answerdiv-"+d_id+"'>This is div with id "+d_id+"</div>").insertAfter("#answerdiv-"+i); 

    } 


}  

는 DEMO

Answer 5

var newdivcount=0; 
 
    function insertDivs(){ 
 
     newdivcount=newdivcount+1; 
 
     var id="answerdiv-"+(newdivcount); 
 
     var div=document.createElement("DIV"); 
 
     div.setAttribute("ID",id); 
 
     var input=document.createElement("TEXTAREA"); 
 
     div.appendChild(input); 
 
     document.getElementById('container').appendChild(input); 
 
    }

<button onclick="insertDivs">InsertDivs</button> 
 
     
 
     <br> 
 
<div id="container"> 
 
    <div id="answertextdiv"> 
 
     <textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea> 
 
    </div> 
 
    </div>

Answer 6

입니다 아래에 같은 JQuery 코드를 사용했습니다.

$("#qnty1").on("input",function(e) 
{ 
var qnt = $(this).val(); 
for (var i = 0; i < qnt; i++) { 
var html = $('<div class="col-lg-6 p0 aemail1"style="margin-bottom:15px;"><input type="text" onkeyup= anyfun(this) class="" name="email1'+i+'" id="mail'+i+'" > </div><div id=" mail'+i+'" class="lft-pa img'+i+' mail'+i+'" > <img class="" src="img/btn.jpg" alt="Logo" > </div> <div id="emailer1'+i+'" class=" mailid "></div>'); 

var $html=$(html); 
$html.attr('name', 'email'+i); 
$('.email1').append($html); 
} 
} 

내 HTML에 아래 텍스트 상자가 있습니다.

<input type="text" name="qnty1" id="qnty1" class="" > 

및

<div class="email1"> 
</div>