div내에 2개의 input필드를 자식노드로 가지고 있는 div오브젝트를 동적으로 여러개생성한다.
div의 id 에대하여 타임스탬프 적용한다.
생성div 타이틀 속성은 NEW로 초기부여 한다. 차후에 MODI, UPD로 변경하여 사용한다.
dynadomdiv.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
</head>
<style>
div {
width: 240px;
height: 100px;
margin: 5px;
border: 1px solid blue;
}
</style>
<script>
let gdic=0;
function ftmstmp(){
let lodnow;
let ldtmstmp;
let lsyy,lsmo,lsdd,lshh,lsmi,lsss,lssm,lstmstmp;
lodnow=new Date();//console.log(lodnow);
lsyy=lodnow.getFullYear().toString();
lsmo=(lodnow.getMonth()+1).toString().padStart(2,"0");
lsdd=lodnow.getDate().toString().padStart(2,"0");
lshh=lodnow.getHours().toString().padStart(2,"0");
lsmi=lodnow.getMinutes().toString().padStart(2,"0");
lsss=lodnow.getSeconds().toString().padStart(2,"0");
lssm=lodnow.getMilliseconds().toString();
lstmstmp=lsyy+lsmo+lsdd+lshh+lsmi+lsss+lssm;
console.log(`${lsyy}:${lsmo}:${lsdd}:${lshh}:${lsmi}:${lsss}:${lssm}`);
console.log(lstmstmp);
return lstmstmp;
}
function fdyna1(){
let lonode;
let lstmstmp;
let newodiv;
let newoinurl;
let newointitle;
let newolabel;
let newoincate;
let nwoinxhid;//x pos hidden;
let nwoinyhid;//y pos hidden;
newodiv=document.createElement("div");
newoinurl=document.createElement("input");
newoinurl.setAttribute("size",25);
newoinurl.setAttribute("length",250);
newolabel=document.createElement("label");
newolabel.innerText="타이틀";
newointitle=document.createElement("input");
newointitle.setAttribute("size",23);
newointitle.setAttribute("length",250);
lstmstmp=ftmstmp();
gdic++;
newodiv.id="DIV"+lstmstmp;//sets ID.
newodiv.setAttribute("title", "NEW");//NEW, MODI, UPDE
//newodiv.innerHTML="div("+String(gdic)+"):"+lstmstmp;//monitor;
newodiv.appendChild(newolabel);
newodiv.appendChild(newointitle);
newodiv.appendChild(newoinurl);
lonode=document.body.appendChild(newodiv);
console.log(typeof(lonode)+String(gdic)+":"+lstmstmp);
}
function fdetectobj(){
var i=0;
var c=0;
var ss='';
const nodeList=document.querySelectorAll("div");
c=nodeList.length
for(i=0;i<c;i++){
ss=nodeList[i].getAttribute("id");
ss+="["+nodeList[i].getAttribute("title")+"]";
console.log(ss);
}
document.getElementById("in1").value=String(c);
}
</script>
<body>
<input type="button" onclick="fdyna1()" value="dyna div">
<input type="button" onclick="fdetectobj()" value="detect obj">
<input type="text" size=3 length=3 id="in1">
</body>
</html>
Derived from prj bkp 2024.
엄청긴 스크립트 혹은 라이브러리 필요성 아닌경우 한파일에 넣는것이 때로는 효율적이라 생각됩니다.
특히 이런 설명후 셀프해보기 할때와 본문서를 새로 업데이트 할때또한 그런것 같습니다.
즐코! 화이팅!
'web' 카테고리의 다른 글
| [dyna DOM] 동적 생성, Dynamic DOM, Div (2) | 2024.09.22 |
|---|---|
| js 자스 타임스탬프 javascript timestamp. (2) | 2024.09.21 |
| js 줄바꿈, 출력할때와 편집기 상에서, 개행 편집 (0) | 2024.08.03 |
| HTML Game Development. (0) | 2024.07.29 |
| [Html] Draggable Div, 드래그 가능한 Div 요소. (0) | 2024.07.29 |
