-
[jQuery] 14. Add - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:21jQuery - Add Elements1. Add New HTML Content새로운 내용을 추가하는데 사용되는 4 가지 jQuery 메소드를 살펴볼 것입니다:- append()- prepend()- after()- before()2. jQuery append() Methodappend() 메소드는 선택된 HTML 요소의 맨 끝에 내용을 추가하는 메소드입니다.12$("p").append("Some appended text.");
cs 3. jQuery prepend() Methodprepend() 메소드는 선택된 HTML 요소의 맨 처음에 내용을 추가하는 메소드입니다.12$("p").prepend("Some prepended text.");cs 4. Add Several New Elements With append() and prepend()위 예제에서는 몇 안되는 텍스트를 추가하였습니다.그러나, append()와 prepend() 메소드는 파라미터로 무한대의 갯수의 새로운 요소를 가질 수 있습니다.12345678910111213141516171819202122<!DOCTYPE html><html><head><script>function appendText() {var txt1 = "<p>Text.</p>"; // Create text with HTMLvar txt2 = $("<p></p>").text("Text."); // Create text with jQueryvar txt3 = document.createElement("p");txt3.innerHTML = "Text."; // Create text with DOM$("body").append(txt1, txt2, txt3); // Append new elements}</script></head><body><p>This is a paragraph.</p><button onclick="appendText()">Append text</button></body></html>cs 5. jQuery after() and before() Methodsafter() 메소드는 선택된 HTML 요소의 이후에 내용이 삽입됩니다.before() 메소드는 선택된 hTML 요소의 이전에 내용이 삽입됩니다.6. Add Several New Elements With after() and before()또한, after()와 before()도 마찬가지로 파라미터로 무한 개의 새로운 요소를 가질 수 있습니다.1234567function afterText() {var txt1 = "<b>I </b>"; // Create element with HTMLvar txt2 = $("<i></i>").text("love "); // Create with jQueryvar txt3 = document.createElement("b"); // Create with DOMtxt3.innerHTML = "jQuery!";$("img").after(txt1, txt2, txt3); // Insert new elements after img}cs 'Web > jQuery' 카테고리의 다른 글
[jQuery] 17. CSS() - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 16. CSS Classes - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 15. Remove - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 13. Set - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 12. Get - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 11. Chaining - jQuery 강좌 jQuery / CSE (0) 2015.06.13
