jQuery - Add Elements
1. Add New HTML Content
새로운 내용을 추가하는데 사용되는 4 가지 jQuery 메소드를 살펴볼 것입니다:
- append()
- prepend()
- after()
- before()
2. jQuery append() Method
append() 메소드는 선택된 HTML 요소의 맨 끝에 내용을 추가하는 메소드입니다.
| $("p").append("Some appended text."); | cs |
3. jQuery prepend() Method
prepend() 메소드는 선택된 HTML 요소의 맨 처음에 내용을 추가하는 메소드입니다.
| $("p").prepend("Some prepended text."); | cs |
4. Add Several New Elements With append() and prepend()
위 예제에서는 몇 안되는 텍스트를 추가하였습니다.
그러나, append()와 prepend() 메소드는 파라미터로 무한대의 갯수의 새로운 요소를 가질 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <script> function appendText() { var txt1 = "<p>Text.</p>"; // Create text with HTML var txt2 = $("<p></p>").text("Text."); // Create text with jQuery var 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() Methods
after() 메소드는 선택된 HTML 요소의 이후에 내용이 삽입됩니다.
before() 메소드는 선택된 hTML 요소의 이전에 내용이 삽입됩니다.
| $("img").after("Some text after"); $("img").before("Some text before"); | cs |
6. Add Several New Elements With after() and before()
또한, after()와 before()도 마찬가지로 파라미터로 무한 개의 새로운 요소를 가질 수 있습니다.
| function afterText() { var txt1 = "<b>I </b>"; // Create element with HTML var txt2 = $("<i></i>").text("love "); // Create with jQuery var txt3 = document.createElement("b"); // Create with DOM txt3.innerHTML = "jQuery!"; $("img").after(txt1, txt2, txt3); // Insert new elements after img } | cs |