:: 글답변 :: 이 름 패스워드 이메일 홈페이지 옵 션 html  분 류 선택하세요 Html CSS Script JQuery ASP PHP GNU .NET MySQL MsSQL DNS SEO ENG IONIC REACT 제 목 > > > <title>DOM 요소 생성 후 원하는 요소에 추가</title> > > <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> > <script type="text/javascript"> > $(document).ready(function () { > //[1] 태그안의 내용 초기화 > $('#lblDisplay').empty(); > //[2] 동적으로 태그 추가 > var strHtml = $("<a href='#'>닷넷코리아</a><hr />"); > $('#lblDisplay').append(strHtml); > }); > </script> > <!--[1] 동적으로 태그 추가 --> > <span id="lblDisplay"><b>여기에 태그 추가</b></span> > > > > <title>DOM 요소의 앞/뒤에 요소 추가</title> > > <style type="text/css"> > .Chapter { background-color:Silver; } > .Content { height:100px; border:1px solid red; } > </style> > <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> > <script type="text/javascript"> > $(document).ready(function () { > //[1] 내용 뒤에 구분선(<hr />) 삽입 > $('<hr />').insertAfter(".Content"); > //[2] TOP 링크를 Chapter 앞에 추가 > $('p.Chapter:gt(0)').before("<a href='#'>TOP</a>"); > }); > </script> > > <p class="Chapter">1 장</p> > <div class="Content"> > 내용... > </div> > <p class="Chapter">2 장</p> > <div class="Content"> > 내용... > </div> > <p class="Chapter">3 장</p> > <div class="Content"> > 내용... > </div> > > > > <title>특정 용어에 대해서 번호 붙이기</title> > > <script type="text/javascript"> > $(document).ready(function () { > //[1] term CSS 클래스에 배경색 적용 > $('.term') > .not(":odd").css("backgroundColor", "Yellow") > .end() > .filter(":odd").css("background-color", "LightBlue"); > //[2] 각각의 주석/용어 뒤에 번호 붙이기 > $('.term').each(function (i) { $(this).append("<sup>" + (i + 1) + "</sup>"); }); > }); > </script> > > <h3>jQuery is a new kind of JavaScript Library.</h3> > <div> > <span class="term">jQuery</span> is a fast and concise <span class="term">JavaScript</span> Library > that simplifies <span class="term">HTML</span> document traversing, > event handling, animating, and <span class="term">Ajax</span> interactions > for rapid web development. > jQuery is designed to change the way that you write JavaScript. > </div> > > > > <title>검색된 요소를 복사하기</title> > > <style type="text/css"> > #menu { background-color:Blue; color:White; } > #submenu { background-color:Silver;} > #content { height:100px; } > </style> > <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> > <script type="text/javascript"> > $(document).ready(function () { > //[!] 상단 메뉴를 복사(Clone)해서 하단 메뉴에 추가(Append) > $('#menu').clone().insertBefore('#submenu'); > $('#menu').clone().prependTo('#submenu'); > // 원래 하단 메뉴가 있는 위치 > $('#menu').clone().appendTo('#submenu'); > $('#menu').clone().insertAfter('#submenu'); > }); > </script> > <div id="menu"> > HOME About > </div> > <div id="content"> > 상단 메뉴를 아래 하단메뉴에 복사 > </div> > <div id="submenu"> > 여기는 하단메뉴 들어오는 곳 > </div> > > > > <title>검색된 요소를 변경하기</title> > > <style type="text/css"> > button { display:block; margin:3px; color:red; width:200px; } > div { color:red; border:2px solid blue; width:200px; > margin:3px; text-align:center; } > </style> > <script type="text/javascript"> > $(document).ready(function () { > // 모든 버튼 요소를 클릭시 > $("button").click(function () { > // 나자신(버튼)을 <div> 태그로 변경하자. > $(this).replaceWith("<div>" + $(this).text() + "</div>"); > }); > }); > </script> > <button>First</button> > <button>Second</button> > <button>Third</button> > > > > <title>검색된 요소를 완전 제거</title> > > <style type="text/css"> > div { background-color:Yellow; } > </style> > <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> > <script type="text/javascript"> > $(document).ready(function () { > //[1] 내용 지우기 > $('#btnEmpty').click(function () { > $('div').empty(); > $('div').append("<b>hi</b>"); // div에 추가 가능 > }); > //[2] 요소 없애기 > $('#btnRemove').click(function () { > $('div').remove(); > $('div').append("<b>hi</b>"); // div 없다. > }); > }); > </script> > > <div> > <p>jQuery</p> > <p>Ajax</p> > </div> > <input type="button" id="btnEmpty" value="위 영역 삭제" /> > <input type="button" id="btnRemove" value="위 영역 삭제" /> > 링크 #1 링크 #2 파일첨부   왼쪽의 글자를 입력하세요.