Chèn Thêm Nội Dung Vào HTML Với JQuery

Trang chủ

• PHP
• Liên hệ

• HTML
• CSS
• JavaScript
• PHP
• Server
• Java
• Tri thức
• SQL
• JQuery

• Liên hệ

jQuery cơ bản § 1 Giới thiệu jQuery § 2 Selector chọn phần tử trong jQuery § 3 Thuộc tính HTML và jQuery § 4 Nội dung phần tử với jQuery § 5 Chèn nội dung với jQuery § 6 jQuery và CSS class § 7 jQuery và thuộc tính CSS § 8 jQuery di chuyển trong DOM § 9 jQuery xóa phần tử § 10 jQuery bắt các sự kiện § 11 Hiệu ứng ẩn / hiện phần tử § 12 Hiệu ứng động animate() § 13 Thêm hàm vào thư viện jQuery

• Lập trình PHP
  • PSR
  • Laminas
  • SPL
  • Xenforo
  • Zend Framework
• Lập trình ứng dụng iOS - Swift
• Ruby
  • Sketchup
• Lập trình Dart - Flutter
• Lập trình C# (C Sharp)
  • Lập trình C# Cơ bản
• Server
  • MySql Server
  • Windows
  • Apache
  • PHP
• HTML
• Javascript
  • JQuery
  • TypeScript - Angular
• CSS
  • Sử dụng SASS / SCSS
  • Bootstrap - CSS Framework
• SQL
  • SQL Server ( .NET Framework - C#)
  • MS Access
• Java
  • Android Java
• Thuật ngữ - Các vấn đề cơ bản
• Tools
  • Git và GitHub
  • Kubernetes
  • Mathematica
  • SSH - Secure Shell
  • Grunt
  • Elasticsearch
  • Docker
  • macOS
  • English Study
• Tin tức công nghệ
• Tri thức & Khoa học
  • Yoga

• Javascript
• JQuery

Javascript Nội dung phần tử với jQuery (Bài trước) (Bài tiếp) jQuery và CSS class Chèn thêm nội dung vào HTML với jQuery

Sử dụng các phương thức append(), prepend(), after(), before() để chèn thêm phần tử, nội dung vào HTML

Thêm nội dùng vào trang HTML

Ở phần trước chúng ta đã dử dụng các phương thức html(), text() để lấy cũng như thiết lập giá trị/nội dung trong phần tử. Tuy nhiên khi sử dụng các phương thức này thì nội dung cũ của phần tử sẽ bị ghi đè, mất đi. Do vậy jQuery còn cung cấp thêm các phương thức linh hoạt hơn là:

• append() chèn nội dùng vào cuối trong các phần tử chọn
• prepend() chèn nội dùng vào phần đầu trong phần tử chọn
• after() chèn nội dùng vào phía sau phần tử chọn
• before() chèn nội dùng vào phía trước phần tử chọn

Nội dung chèn có thể là HTML Markup, Text hoặc tạo ra một phần tử DOM mới bằng jQuery, ví dụ tạo phần tử <p> mới sau đó thiết lập nội dung text cho nó là 'Hello World'

var newelement = $("<p></p>").text("Hello World");

Ví dụ sử dụng append(), prepend(), after(), before() trong jQuery

Ở ví dụ dưới đây, dùng jQuery chọn phần tử div có nền màu đen, sau đó chèn nội dung vào bên trong nó (chèn ở đầu (prepend, ở cuối append) và phía trước (before) phía sau (after)

Nội dung ban đầu trong phần tử

append() prepend() after() before()

Đoạn mã cho ví dụ trên

<style> #containerexample { background: #9c27b0; padding: 20px; color: white; font-weight: bold; } #phantudiv { background: #1d1e1f; padding: 30px; } #containerexample p { border: 1px dashed gray; padding: 5px; animation-name: keyframes1; animation-duration: 2s; } #phantudiv>p.phantup { color: yellow; } @keyframes keyframes1 { 0% {opacity: 0;} 100% {opacity: 1;} } </style> <div id="containerexample"> <div id="phantudiv"> <p class="phantup">Nội dung ban đầu trong phần tử</p> </div> <br> <button onclick="append_jquery()">append()</button> <button onclick="prepend_jquery()">prepend()</button> <button onclick="after_jquery()">after()</button> <button onclick="before_jquery()">before()</button> </div> <script> var phantuchon = $("#phantudiv"); function append_jquery() { phantuchon.append("<p>Chèn thêm bằng append()</p>"); } function prepend_jquery() { phantuchon.prepend("<p>Chèn thêm bằng prepend()</p>"); } function after_jquery() { phantuchon.after("<p>Chèn thêm bằng after()</p>"); } function before_jquery() { phantuchon.before("<p>Chèn thêm bằng before()</p>"); } </script> ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới Cài đặt NodeJS trên WSL tạo ứng dụng ExpressJS Lớp trong Javascript Hướng dẫn tạo DropDown menu với jQuery Hiệu ứng động với animate() trong jQuery Đọc và gán giá trị cho phần tử HTML bằng jQuery Làm việc với thuộc tính phần tử HTML bằng jQuery Selector - Chọn phần tử trong jQuery Nội dung phần tử với jQuery (Bài trước) (Bài tiếp) jQuery và CSS class Giới thiệuPrivacyTừ điển Anh - ViệtChạy SQLRegExpCubic-bezierUnix timestampKý tự HTMLcalories, chỉ số BMRchỉ số khối cơ thể BMITạo QR CodeLịch vạn niên Liên hệ RSS

Đây là blog cá nhân, tôi ghi chép và chia sẻ những gì tôi học được ở đây về kiến thức lập trình PHP, Java, JavaScript, Android, C# ... và các kiến thức công nghệ khác Developed by XuanThuLab