동적생성 Div, id부여
Dynamic DOM, 동적 생성에 대하여
개발을 하다보면 자주 부딪히게 되는 부분이 "동적생성"이라는 부분입니다. 사용자의 요구 라든지 UI 특히 이러한 부분에서 상황을 미리 예측하기는 매우 힘들고 설계에 모든 가능한 것을 반영할 수 없기에 더욱 그러합니다. 그리하여 다양한 상황에 변화무쌍하게 프로그램이 돌아가게 만들면 매우 좋을것 같습니다.
w3school dynamic paragraph
https://www.w3schools.com/jsreF/tryit.asp?filename=tryjsref_document_createelement4
Fiddle이나 Codpen을 활용합니다. css, Js 부분을 따로 분리하지 않고 Html에 하나에 모은것은 바로 복붙 하여 바로 실행하면서 진행하는것이 좋기에 편리하게 할 수 있도록 그렇게 하였습니다. 상단의 w3스쿨의 tryit 에디터를 잘 활용하면 될 것같습니다. 제가 활용법을 직접 말씀드리기는 애매하므로 잠깐만 보시면 바로 감이 오실것입니다. :-)
Div를 버튼을 클릭할 때마다 동적으로 생성해 봅니다.
기능개선버전. id부여, 간단하게 Date.now()로 가기로 하죠 유저프렌들리 필요 상황은 아니니 오류만 않나고 가독성만 높으면되죠. 그리고 Jsfiddle은 소스변경시 자동적용 안되는것 같습니다.
문서버전 변경편리하게 그냥 티스토리 자체기능으로 가겠습니다. ^^ 역시 최고의 튜닝은 오리지널이죠^^.
제스타일은 왠만하면 한페이지에 다 때려넣기, 잘 아시죠 1000줄 정도는 되야 파일 분리합니다. 프로젝트 아닌이상 불필요하고 바로바로 복붙해서 써먹기 편합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>dynadom</title>
</head>
<script>
let dicnt=0;
function fdyna1(){
const mydiv=document.createElement("div");
dicnt++;
let sid=Date.now();
mydiv.id=sid;
mydiv.setAttribute("title",sid);
mydiv.innerHTML="div"+String(dicnt);
document.body.appendChild(mydiv);
}
</script>
<body>
<input type="button" onclick="fdyna1()" value="dynadom">
</body>
</html>
동적생성시 소스보기는 동정생성소스는 메모리에 있으므로 개발자모드에서만 소스확인 가능한것으로 보입니다.
아래 파일활용하시기 바랍니다. 즐코!
'code,app,web > html,js' 카테고리의 다른 글
| js 함수 파라메터 인라인 호출 on click, 이렇게도 되네 ^^ (0) | 2024.08.27 |
|---|---|
| 새탭에서 웹 페이지 열기 a href, 앵커, 하이퍼링크 (0) | 2024.07.25 |
| rwd,hlink01 (0) | 2024.07.09 |
