Hướng dẫn prepend html javascript - thêm html javascript

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học jQuery
  • .prepend()

Nội dung chính

  • Định nghĩa và sử dụng
  • Cấu trúc
  • .prepend(nội dung)
  • Ví dụ thêm
  • .prepend(function(index){...})
  • Định nghĩa và sử dụng
  • Cấu trúc
  • .prepend(nội dung)
  • Ví dụ thêm
  • .prepend(function(index){...})

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

  • Cấu trúc

Cấu trúc

.prepend(nội dung)nội dung)

$('div').prepend('<p>nội dung thêm vào</p>');
$('div').prepend($('h3'));

.prepend(nội dung)

Ví dụ thêm

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
<div>Thành phần div</div>
</body>
</html>

.prepend(): Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

Html viết:prepend 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í đầu tiên của thành phần div.

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 prepend 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í đầu tiên 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

Ví dụ thêm

Ví dụ thêm

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend($('h3'));
});
</script>
</head>

<body>
<div>
<p>thành phần p</p>
<h3>thành phần h3</h3>
</div>
</body>
</html>

.prepend(): Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

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 prepend 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í đầu tiên của thành phần div.So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

thành phần p


thành phần h3


Sau khi có jQuery

thành phần h3


thành phần p


.prepend(function(index){...})

Ví dụ thêm

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend(function() {
        return '<p>' + this.className + '</p>';
    });
});
</script>
</head>

<body>
<div class="test01">thành phần div 01</div>
<div class="test02">thành phần div 02</div>
</body>
</html>

.prepend(): Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

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 prepend 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í đầu tiên của thành phần div.So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

thành phần div 02

Sau khi có jQuery

test01


thành phần div 01

test02


thành phần div 02

  • Trang chủ
  • Thành phần div
  • nội dung thêm vào Thành phần div nội dung thêm vào Thành phần div
  • Ban đầu thành phần h3 nằm trong thành phần div ở vị trí bất kỳ, nhưng khi sử dụng prepend thì thành phần h3 được di chuyển ngay vị trí đầu tiên của thành phần div.
  • .prepend()

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

  • Cấu trúc

Cấu trúc

  • .prepend(nội dung)

.prepend(nội dung)nội dung)

$('div').prepend('<p>nội dung thêm vào</p>');
$('div').prepend($('h3'));
  • Ví dụ thêm

.prepend(nội dung)

Ví dụ thêm

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend('<p>nội dung thêm vào</p>');
});
</script>
</head>

<body>
<div>Thành phần div</div>
<div>Thành phần div</div>
</body>
</html>

.prepend(): Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

Html viết:prepend 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í đầu tiên của thành phần div.

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 prepend 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í đầu tiên 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

Ví dụ thêm

Ví dụ thêm

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend($('h3'));
});
</script>
</head>

<body>
<div>
<p>thành phần p</p>
<h3>thành phần h3</h3>
</div>
</body>
</html>

.prepend(): Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

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 prepend 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í đầu tiên của thành phần div.So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

thành phần p


thành phần h3


Sau khi có jQuery

thành phần h3


thành phần p


.prepend(function(index){...})

Ví dụ thêm

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').prepend(function() {
        return '<p>' + this.className + '</p>';
    });
});
</script>
</head>

<body>
<div class="test01">thành phần div 01</div>
<div class="test02">thành phần div 02</div>
</body>
</html>

.prepend(): Chèn nội dung vào trong thành phần ở vị trí đầu tiên.

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 prepend 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í đầu tiên của thành phần div.So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery

thành phần div 02

Sau khi có jQuery

test01


thành phần div 01

test02


thành phần div 02