Hướng dẫn div append div javascript - div nối thêm div javascript

• Trang chủ
• Tham khảo
• jQuery
• jQuery - function
• .append[]

Định nghĩa và sử dụng

• 
  
  
  Tiêu đề
  
  
  $[function[]{
      $['div'].append['
  nội dung thêm vào
  '];
  }];
  
  
  
  
  Thành phần div
  
  

  2 Chèn nội dung, di chuyển thành phần vào trong thành phần khác, nội dung này thường được sắp xếp ở vị trí sau cùng.

Cấu trúc

• Đã được thêm vào từ phiên bản 1.0

.append[nội dung]nội dung]

$['div'].append['
nội dung thêm vào
'];
$['div'].append[$['h3']];

• Đã được thêm vào từ phiên bản 1.4

.append[nội dung]

Đã được thêm vào từ phiên bản 1.4

Tiêu đề


$[function[]{
    $['div'].append['
nội dung thêm vào
'];
}];




Thành phần div

Html viết:

Hiển thị trình duyệt:append thì thành phần div được chèn thêm thành phần

nội dung thêm vào

vào ngay vị trí sau cùng của thành phần div.

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng append thì thành phần div được chèn thêm thành phần nội dung thêm vào vào ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:Trước khi có jQuery

Sau khi có jQuery	Thành phần div nội dung thêm vào

Thành phần div nội dung thêm vào

Đã được thêm vào từ phiên bản 1.4

Tiêu đề


$[function[]{
    $['div'].append[$['h3']];
}];





thành phần h3
thành phần p

Html viết:

Hiển thị trình duyệt:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng append thì thành phần div được chèn thêm thành phần nội dung thêm vào vào ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:Trước khi có jQuery

Sau khi có jQuery thành phần h3 thành phần p	Thành phần div thành phần p thành phần h3

.append[function[index]{...}]

Đã được thêm vào từ phiên bản 1.4

Tiêu đề


$[function[]{
    $['div'].append[function[] {
        return '
' + this.className + '

  

';
    }];
}];




thành phần div 01
thành phần div 02

Html viết:

Hiển thị trình duyệt:

Ban đầu nội dung chỉ có thành phần div, nhưng khi sử dụng append thì thành phần div được chèn thêm thành phần nội dung thêm vào vào ngay vị trí sau cùng của thành phần div.

So sánh code HTML trước và sau khi có jQuery:Trước khi có jQuery

Sau khi có jQuery thành phần div 02	Thành phần div test01 thành phần div 02 test02

Thành phần div nội dung thêm vào

var newElement = document.createElement['div'];
newElement.innerHTML = "
new content
alert['Hello World!']";
element.appendChild[newElement];​​​​​​​​​​​​​​​​

Ví dụ thêm

Ban đầu thành phần h3 nằm trong thành phần div ở vị trí đầu, nhưng khi sử dụng append thì thành phần h3 được di chuyển ngay vị trí sau cùng của thành phần div.

thành phần h3 thành phần p

$[selector].after["
new content
alert['Hello World!']"];

thành phần p thành phần h3

Với cách sử dụng function như trên, ta đã thêm bên trong mỗi thành phần div lần lượt là thành phần p với nội dung được lấy từ tên class của thành phần div, các thành phần p này nằm ở vị trí sau cùng trong thành phần div tương ứng.

thành phần div 01 thành phần div 0212 gold badges76 silver badges124 bronze badges

thành phần div 01 test01 thành phần div 02 test02 Apr 11 at 16:27

For example,

const content = "
new contentalert['Hello World!']";
const newElement = document.createElement['div'];
newElement.innerHTML = content
const scriptRegex = /[?