Thay thế văn bản trong thẻ p bằng jQuery

Chúng ta có thể thay thế các phần tử HTML bằng cách sử dụng jQuery. phương thức thay thếWith[]. Với phương thức replaceWith[] của jQuery, chúng ta có thể thay thế từng phần tử trong tập hợp các phần tử phù hợp bằng nội dung mới được cung cấp và trả về tập hợp các phần tử đã bị xóa

Các. Phương thức replaceWith[] xóa nội dung khỏi DOM và chèn nội dung mới vào vị trí của nó bằng một lệnh gọi

cú pháp

replaceWith[ newContent ]

.replaceWith[ function ]

Giá trị trả về. Phương thức này trả về phần tử đã chọn với sự thay đổi.

Ghi chú. jquery. replaceWith[], trả về đối tượng jQuery để các phương thức khác có thể được xâu chuỗi vào nó. Tuy nhiên, cần lưu ý rằng đối tượng jQuery ban đầu được trả về. Đối tượng này đề cập đến phần tử đã bị xóa khỏi DOM, không phải phần tử mới đã thay thế nó

Khi phương thức này được sử dụng để trả về nội dung, nó sẽ trả về nội dung văn bản của tất cả các phần tử phù hợp [phần đánh dấu HTML sẽ bị xóa]

Khi phương pháp này được sử dụng để thiết lập nội dung, nó sẽ ghi đè lên nội dung của TẤT CẢ các phần tử phù hợp

Mẹo. Để đặt hoặc trả về innerHTML [văn bản + đánh dấu HTML] của các phần tử đã chọn, hãy sử dụng phương thức html[]

Ví dụ sau minh họa cách thiết lập nội dung bằng các phương thức

$[ "div.second" ].replaceWith[ "
New heading
" ];

$[ "div.second" ].replaceWith[ "
New heading
" ];

$[ "div.second" ].replaceWith[ "
New heading
" ];

Ví dụ

$["#btn1"]. click[function[]{
  $["#test1"]. văn bản ["Xin chào thế giới. "];
}];
$["#btn2"]. click[function[]{
  $["#test2"]. html["Xin chào thế giới. "];
}];
$["#btn3"]. click[function[]{
  $["#test3"]. val["Vịt Dolly"];
}];

Hàm gọi lại cho văn bản[], html[] và val[]

Tất cả ba phương thức jQuery trên.

$[ "div.second" ].replaceWith[ "
New heading
" ];

$[ "div.second" ].replaceWith[ "
New heading
" ];

$[ "div.second" ].replaceWith[ "
New heading
" ];

Ví dụ sau minh họa

$[ "div.second" ].replaceWith[ "
New heading
" ];

$[ "div.second" ].replaceWith[ "
New heading
" ];

Ví dụ

$["#btn1"]. click[function[]{
  $["#test1"]. text[function[i, origText]{
    return "Văn bản cũ. " + origText + " Văn bản mới. Chào thế giới.
    [chỉ mục. " + i + "]";
  }];
}];

$["#btn2"]. click[function[]{
  $["#test2"]. html[function[i, origText]{
    return "html cũ. " + origText + " Html mới. Chào thế giới.
    [chỉ mục. " + i + "]";
  }];
}];

Đặt thuộc tính - attr[]

Phương thức jQuery

$[ "div.second" ].replaceWith[ "
New heading
" ];

Ví dụ sau minh họa cách thay đổi [đặt] giá trị của thuộc tính href trong một liên kết

Ví dụ

$["nút"]. click[function[]{
  $["#w3s"]. attr["href", "https. //www. w3schools. com/jquery/"];
}];

Phương thức

$[ "div.second" ].replaceWith[ "
New heading
" ];

Ví dụ sau minh họa cách đặt cả hai thuộc tính href và title cùng một lúc

Ví dụ

$["nút"]. click[function[]{
  $["#w3s"]. attr[{
    "href". "https. //www. w3schools. com/jquery/",
    "tiêu đề". "Hướng dẫn jQuery của W3Schools"
  }];
}];

Hàm gọi lại cho attr[]

Phương thức jQuery

$[ "div.second" ].replaceWith[ "
New heading
" ];

Sự miêu tả. Thay thế từng phần tử trong tập hợp các phần tử phù hợp bằng nội dung mới được cung cấp và trả lại tập hợp các phần tử đã bị xóa

• đã thêm phiên bản. 1. 2 . thay thếWith[newContent]

  • Nội dung mới

    Loại. htmlString hoặc Phần tử hoặc Mảng hoặc jQuery

    Nội dung cần chèn. Có thể là một chuỗi HTML, phần tử DOM, mảng các phần tử DOM hoặc đối tượng jQuery

• đã thêm phiên bản. 1. 4 . thay thếWith[ chức năng ]

  • chức năng

    Loại. Chức năng[]

    Một hàm trả về nội dung để thay thế tập hợp các phần tử phù hợp

Phương thức

$[ "div.second" ].replaceWith[ "
New heading
" ];

1

2

3

4

5

  

  Hello
  And
  Goodbye

$[ "div.second" ].replaceWith[ "
New heading
" ];

1

$[ "div.second" ].replaceWith[ "
New heading
" ];

Điều này dẫn đến kết cấu

1

2

3

4

5

  Hello
  New heading
  Goodbye

Tất cả các yếu tố bên trong

$[ "div.second" ].replaceWith[ "
New heading
" ];

1

Điều này khiến tất cả chúng được thay thế

1

2

3

4

5

  New heading
  New heading
  New heading

Một phần tử cũng có thể được chọn để thay thế

1

.replaceWith[ function ]

Điều này dẫn đến cấu trúc DOM

1

2

3

4

.replaceWith[ function ]

Ví dụ này chứng minh rằng phần tử được chọn sẽ thay thế mục tiêu bằng cách được di chuyển khỏi vị trí cũ của nó chứ không phải bằng cách sao chép

Phương thức

$[ "div.second" ].replaceWith[ "
New heading
" ];

Ghi chú bổ sung

• Phương thức

  $[ "div.second" ].replaceWith[ "
  New heading
  " ];
  

  1 xóa tất cả dữ liệu và trình xử lý sự kiện được liên kết với các nút đã xóa
• Trước jQuery 1. 9,

  $[ "div.second" ].replaceWith[ "
  New heading
  " ];
  

  1 sẽ cố gắng thêm hoặc thay đổi các nút trong bộ jQuery hiện tại nếu nút đầu tiên trong bộ không được kết nối với tài liệu và trong những trường hợp đó, hãy trả về một bộ jQuery mới thay vì bộ ban đầu. Phương thức có thể hoặc không trả về kết quả mới tùy thuộc vào số lượng hoặc tính liên kết của các đối số của nó. Kể từ jQuery 1. 9,

  $[ "div.second" ].replaceWith[ "
  New heading
  " ];
  

  7,

  $[ "div.second" ].replaceWith[ "
  New heading
  " ];
  

  8 và

  $[ "div.second" ].replaceWith[ "
  New heading
  " ];
  

  1 luôn trả về bộ ban đầu chưa sửa đổi. Việc cố gắng sử dụng các phương thức này trên một nút không có nút cha sẽ không có tác dụng—tức là, tập hợp cũng như các nút mà nút đó chứa đều không bị thay đổi

.replaceWith[ function ]

.replaceWith[ function ]

  Hello
  New heading
  Goodbye

$[ "div.second" ].replaceWith[ "
New heading
" ];