동적 Div ID 및 내부 요소 작성

Question

닫힌 상태에서 showModalDialog에서 값을 가져올 수있는 동적 Div를 만듭니다. 그래서 모달을 닫은 후에 저는 몇 가지 값을 얻습니다.

은 무엇 내가 여기서 뭘 시도하고있다 :

1. 내가 동적 DIV 년대의 부부가 각 사업부에 대해, 내가 창을 열 수있는 링크가 있습니다.
2. 파일을 선택한 후에는 부모 창으로 쉼표로 구분되어 반환됩니다.
3. 그 팝업이 열리는 div 안에 그 값을 삽입하고 싶습니다. 그러나이 시나리오에서 나는 문제에 직면하고있다. divId는의 동적 여기

이 자바 스크립트 + jQuery를 기반의 전체 코드가 생성되고, 나는 다음과 같은 오류를 얻고있다.

TypeError: theDiv.appendChild is not a function 
[Break On This Error] 

theDiv.appendChild(newNode); 

    <script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
function eliminateDuplicates(arr,divID) 
{ 
    var i,  
    len=arr.length,  
    out=[],  
    obj={};  
    for (i=0;i<len;i++) 
    {  
     obj[arr[i]]=0; 
    } 
    for (i in obj) 
    {  
     out.push(i); 
    } 
    return out; 
} 
function GetElementsStartingWith(tagName, subString) { 
    var elements = document.getElementsByTagName(tagName); 
    var result = []; 
    for (var i = 0; i < elements.length; i++) { 
     var element = elements[i]; 
     if (element.id && element.id.substr(0, subString.length) == subString) { 
      result.push(element); 
     } 
    } 
    return result; 
} 
Test= function(str,divID) 
{ 
    var arrID = new Array(); 
    arrID = str.split(',');     
    arrID = eliminateDuplicates(arrID);    
    var theDiv = $("#projectsList"+divID).attr('id'); //document.getElementById('projectsList'); 
    alert(theDiv); 
    var cmp= $("#projectIDS"+divID).val(); //document.getElementById("projectIDS").value; 
    var cnp = $("#countProj"+divID);//document.getElementById("countProj") 
    var cproj; 
     if(cnp.val().length == 0) 
      cproj=0; 
     else 
     cproj=parseInt(cnp.val()); 

    for (var j=0; j<arrID.length; j++) 
    { 
     if (parseInt(cproj) + 1 > 50) 
     { 
      alert("You cannot add more than 50 Project id's "); 
      return; 
     } 
     if(cmp!="" && cmp.indexOf(arrID[j])!=-1) 
     continue; 
     var newNode = document.createElement('div'); 
     newNode.style.cssText = "background:#CCCCCC;border:1px solid #666666;width:100px;word-wrap:break-word;margin:3px;float:left;color:black;text-decoration:none!important;height:auto;vertical-align:middle;padding-top:2px;";  
     newNode.title = arrID[j]+" "; 
     newNode.innerHTML = '<input type=hidden name=Proj_' + j + ' ' + 'value=' + arrID[j] + '>' + arrID[j] + ' <a href="#" title="Remove Project" onclick="removetext($(this).parent());"><b>X</b></a>'; 
     theDiv.appendChild(newNode); 
     if(cmp.length == 0) 
      { 
       //document.getElementById("projectIDS").value=arrID[j] 
       $("#projectIDS"+divID).val(arrID[j]); 
      } 
     else 
      { 
       //document.getElementById("projectIDS").value = document.getElementById("projectIDS").value+","+arrID[j]; 
       $("#projectIDS"+divID).val($("#projectIDS"+divID).val()+","+arrID[j]); 
      } 
      cproj = parseInt(cproj)+1; 
     //document.getElementById("countProj").value =cproj; 
     cnp.value(cproj); 
    } 
} 
removetext = function(par) 
{ 
    var strremove=par.text(); 
    var strexist = document.getElementById("projectIDS").value; 
    strremove = strremove.replace(" X",""); 
    tempRemove(strexist, strremove); 
    par.remove(); 
    var cproj; 
     if(document.getElementById("countProj").value.length == 0) 
      cproj=0; 
     else 
     {cproj=parseInt(document.getElementById('countProj').value); 

     cproj=parseInt(cproj)-1;}      
     document.getElementById("countProj").value =cproj; 
} 

function tempRemove(strexist,strremove) 
{ 
    var b = strexist.indexOf(strremove); 
    var after = strexist.indexOf(",",b); 
    var newstrexist; 
    var before = strexist.lastIndexOf(",",b); 
    if(after!=-1) 
    {newstrexist=strexist.replace(strremove+',',"");} 
    else if(before!=-1) 
    {newstrexist=strexist.replace(','+strremove,"");} 
    else 
    {newstrexist= strexist.replace(strremove,"");} 

    document.getElementById("projectIDS").value=newstrexist; 
    //remove current friend 
} 
function openWindow(divID) 
{ 
    var lookUpAlys=window.showModalDialog("files.cfm?d=" + Math.random() + '&fileID=' + divID,window,"center=yes;dialogWidth:895px:dialogHeight:785px;status:no"); 
    if(lookUpAlys.forename!=undefined) 
    { 
     var temp = lookUpAlys.forename; 
     Test(temp,divID); 
    } 
} 
</script> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="2" cellpadding="1"> 
    <tr> 
    <td>Choose</td> 
    <td>Files</td> 
    <td>Action</td> 
    </tr> 
    <cfloop from="1" to="5" index="i"> 
    <cfoutput> 
    <tr> 
    <td><input type="checkbox" name="getFile" id="getFile" value="#i#" /></td> 
    <td><div id="projectsList#i#" style="width:500px;height:60px;overflow-y:scroll;border:1px solid gray;"></div><input type="text" name="projectIDS#i#" id="projectIDS#i#" data-id="#i#" value="" /><input type="text" data-id="#i#" name="countProj#i#" id="countProj#i#" value="" /></td> 
    <td><a href="javascript:void(0);" onclick="openWindow(#i#);">Files</a></td> 
    </tr> 
    </cfoutput> 
    </cfloop> 
</table> 
</body> 
</html> 

코드를 잘못 입력하면 사과드립니다.

var theDiv = $("#projectsList"+divID).attr('id'); //document.getElementById('projectsList'); 

당신은

var theDiv = $("#projectsList"+divID)[0]; 

는 DOM 요소를 얻기 위해 수행해야합니다 기본적으로 클래식 자바 스크립트 방법

Answer 1

이것은 당신이 그것을가하는 생각 생각하지 않습니다 그것을 할 노력.

은 또는,이 시나리오, 당신이 원시 DOM 작업을 혼합하고 jQuery를 사방 작업을 감싸 이유 또한, 나는 확실하지 않다

var theDiv = document.getElementById("projectsList" + divID); 

않습니다. 그 중 하나에 충실하고 일관성을 유지하십시오.

Answer 2

var container = $('.itemsList'); 
var divSubmit = $(document.createElement('div')); 
//assigning id to div 
$(divSubmit).attr('id','itemTemplate'); 
$(divSubmit).css({"font-family":"Gotham, Helvetica Neue, Helvetica, Arial, sans-serif","position":"relative","height": "70px","clear" : "both","background-color":"#FFF","border-bottom": "0.09em solid #EBEBEB"}); 
//adding class to main container 
$(divSubmit).addClass('itemTemplate'); 
//adding Child's name label and assigning id to it. 
var Name = '<label class="lblName" id="lblName" for="Name">'+getName()+'</label>'; 
$(divSubmit).append(Name); 
$(divSubmit).append(container); 

다음은 샘플 코드입니다. 먼저 생성 된 div를 포함 할 itemslist 이라는 샘플 컨테이너가 있습니다. divSubmit은 동적으로 제너 레이트되고 컨테이너에 추가됩니다. 클릭 이벤트 용 div를 찾으려면 우리가 아이 이름을 얻고 싶다고합시다.

alert($($(this).find("label.lblName")).val());