Trần Ngọc Minh Notes

<div id="div1"> </div>

<br>

<button>Display dimensions of div</button>

<p>outerWidth() - returns the width of an element (includes padding and border).</p>

<p>outerHeight() - returns the height of an element (includes padding and border).</p>

#div1 {

 height: 100px;

 width: 300px;

 padding: 10px;

 margin: 3px;

 border: 1px solid blue;

 background-color: lightblue;

}

$("button").click(function(){

  var txt = "";

  txt += "Width of div: " + $("#div1").width() + "</br>";

  txt += "Height of div: " + $("#div1").height() + "</br>";

  txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";

  txt += "Outer height of div: " + $("#div1").outerHeight();

  $("#div1").html(txt);

});

<div id="div1"> </div>
<br>

<button>Display dimensions of div</button>

<p>outerWidth(true) - returns the width of an element (includes padding, border, and margin).</p>

<p>outerHeight(true) - returns the height of an element (includes padding, border, and margin).</p>

Đoạn mã CSS:

#div1 {

 height: 100px;

 width: 300px;

 padding: 10px;

 margin: 3px;

 border: 1px solid blue;

 background-color: lightblue;

}

Đoạn mã jQuery:

$("button").click(function(){

  var txt = "";

  txt += "Width of div: " + $("#div1").width() + "</br>";

  txt += "Height of div: " + $("#div1").height() + "</br>";

  txt += "Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";

  txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true);

  $("#div1").html(txt);

});

Thực thi với trình duyệt:

Khi nhấn button:

Vị trí (position) phần tử và thanh cuộn (scroll bar)

jQuery cung cấp các phương thức dùng để xác định vị trí các phần tử hay vị trí thanh cuộn (scroll bar). Các phương thức cơ bản:

Phương thức	Chức năng
offset()	Nhận vị trí hiện tại của phần tử đầu tiên trong tập các phần tử được chọn, tương đối đến document.
offset ({top:value,left:value})	Thiết lập vị trí cho mọi phần tử trong tập các phần tử được chọn, tương đối đến document.
offset(function (index, currentoffset))	Thiết lập vị trí cho mọi phần tử trong tập các phần tử được chọn bằng cách dùng hàm, tương đối đến document. index là vị trí chỉ số của phần tử; currentoffset là vị trí hiện tại của phần tử được chọn.
position()	Trả về vị trí hiện tại của phần tử đầu tiên, tương đối đến phần tử cha,  trong tập các phần tử được chọn.
scrollLeft()	Trả về vị trí thanh cuộn ngang (horizontal scrollbar) cho các phần tử được chọn.
scrollLeft(value)	Thiết lập vị trí giá trị value cho thanh cuộn ngang (horizontal scrollbar) của các phần tử được chọn.
scrollTop()	Trả về vị trí thanh cuộn dọc (vertical scrollbar) của các phần tử được chọn.
scrollTop(value)	Thiết lập vị trí giá trị value cho thanh cuộn dọc (vertical scrollbar) của các phần tử được chọn.

Ví dụ dùng offset() để nhận vị trí:

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

<button>Return the offset coordinates of the p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  var x = $("p").offset();

  alert("Top: " + x.top + " Left: " + x.left);

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng offset() để thiết lập vị trí:

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

<button>Set the offset coordinates of the p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").offset({top: 200, left: 200});

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng offset() để thiết lập vị trí bằng hàm:

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

<button>Set offset coordinates of the p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").offset(function(n, c){

    newPos = new Object();

    newPos.left = c.left + 100;

    newPos.top = c.top + 100;

    return newPos;

  });

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng position() để nhận vị trí của phần tử:

Cho đoạn mã HTML sau:

<p>This is a paragraph.</p>

<button>Return the top and left position of the p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  var x = $("p").position();

    alert("Top position: " + x.top + " Left position: " + x.left);

});

Thực thi với trình duyệt:

Khi nhấn button

Ví dụ dùng scrollLeft() để nhận vị trí của thanh cuộn ngang:

Cho đoạn mã HTML sau:

<div style="border:1px solid black;width:100px;

                    height:130px;overflow:auto">

The longest word in the english dictionary is:
     
       pneumonoultramicroscopicsilicovolcanoconiosis.

</div><br>

<button>Set horizontal scrollbar position to 100px</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("div").scrollLeft(100);

});

Thực thi với trình duyệt:

Nhấn button:

Ví dụ dùng scrollLeft() để thiết lập vị trí của thanh cuộn ngang:

Cho đoạn mã HTML sau:

<div style="border:1px solid black;width:100px;

                    height:130px;overflow:auto">

The longest word in the english dictionary is: 

       pneumonoultramicroscopicsilicovolcanoconiosis.

</div><br>

<button>Set horizontal scrollbar position to 100px</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("div").scrollLeft(100);

});

Thực thi với trình duyệt:

Khi nhấn button

Ví dụ dùng scrollTop() để nhận vị trí của thanh cuộn dọc:

 

Cho đoạn mã HTML sau:

<div style="border:1px solid black;width:100px;

                    height:150px;overflow:auto">

This is some text. This is some text. This is some text. 

This is some text. This is some text. This is some text. 

This is some text. This is some text. This is some text.</div><br>

<button>Return the vertical position of the scrollbar</button>

<p>Move the scrollbar down and click the button again.</p>

Đoạn mã jQuery:

$("button").click(function(){

  alert($("div").scrollTop() + " px");

});

Thực thi với trình duyệt:

Khi nhấn button

Ví dụ dùng scrollTop() để thiết lập vị trí của thanh cuộn dọc:

Cho đoạn mã HTML sau:

<div style="border:1px solid black;width:100px;

                    height:150px;overflow:auto">

This is some text. 

This is some text. 

This is some text. 

This is some text. 

This is some text. 

This is some text. 

This is some text. 

This is some text. 

This is some text.

</div><br>

<button>Set vertical scrollbar position to 100px</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("div").scrollTop(100);

});

Thực thi với trình duyệt:

Khi nhấn button

* Có thể tham khảo thêm về offset (), position (), scrollLeft(), scrollTop() tại http://api.jquery.com/category/offset/

Làm việc với nội dung của phần tử

Làm việc với nội dung HTML

jQuery cung cấp phương thức html() để nhận và thiết lập nội dung HTML cho phần tử được chọn. Cú pháp:

Phương thức	Chức năng
html()	Nhận nội dung HTML từ phần tử được chọn.
html(content)	Thiết lập nội dung HTML content cho phần tử được chọn.
html(function( index, currentcontent))	Thiết lập nội dung HTML content cho phần tử được chọn bằng hàm. index là vị trí chỉ mục của phần tử trong tập, currentcontent là nội dung hiện tại của phần tử được chọn.

Ví dụ dùng html() để nhận nội dung HTML:

Cho đoạn mã HTML sau:

<button>Return the content of the p element</button>

<p>This is a <b>paragraph</b>.</p>

Đoạn mã jQuery:

$("button").click(function(){

  alert($("p").html());

});

Thực thi với trình duyệt:

Nhấn button

Ví dụ dùng html() để thay thế nội dung HTML của phần tử:

Cho đoạn mã HTML sau:

<button>Change content of all p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").html("Hello <b>world!</b>");

});

Thực thi với trình duyệt:

Nhấn button:

Ví dụ dùng html() để thay thế nội dung HTML của phần tử bằng hàm:

Cho đoạn mã HTML sau:

<button>Change the content of the p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").html(function(n){

  return "This p element has index: " + n;

});

Thực thi với trình duyệt:

Khi nhấn button

Làm việc với nội dung văn bản (plain text)

jQuery cung cấp phương thức text() để nhận và thiết lập nội dung văn bản (plain text) cho phần tử được chọn. Cú pháp:

Phương thức	Chức năng
text()	Nhận nội dung văn bản từ phần tử được chọn.
text(content)	Thiết lập nội dung văn bản content cho phần tử được chọn.
text(function( index, currentcontent))	Thiết lập nội dung văn bản content cho phần tử được chọn bằng hàm. index là vị trí chỉ mục của phần tử trong tập, currentcontent là nội dung hiện tại của phần tử được chọn.

 Ví dụ dùng text() để nhận nội dung HTML:

Cho đoạn mã HTML sau:

<button>Return the text content of all p elements</button>

<p>This is a paragraph.</p>

<p>This is <b>another</b> paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  alert($("p").text());

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng text() để thay thế nội dung văn bản:

Cho đoạn mã HTML sau:

<button>Set text content for all p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").text("Hello world!");

});

Thực thi với trình duyệt:

Khi nhấn button:

Ví dụ dùng text() để thay thế nội dung văn bản bằng hàm:

Cho đoạn mã HTML sau:

<button>Set text content of the p elements</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").text(function(n){

    return "This p element has index: " + n;

  });

});

Thực thi với trình duyệt:

Khi nhấn button:

Thêm nội dung đến phần tử

Chúng ta có thể thêm nội dung vào các phần tử được chọn. Một số phương thức phổ biến trong jQuery:

Phương thức	Chức năng
append(content, function(index, html))	Chèn nội dung content (html, text, jQuery objects, DOM) vào cuối các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập, html là mã HTML hiện tại của phần tử được chọn.
prepend(content, function(index, html))	Chèn nội dung content (html, text, jQuery objects, DOM) vào đầu các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập, html là mã HTML hiện tại của phần tử được chọn.
after(content, function(index))	Chèn nội dung content (html, text, jQuery objects, DOM) vào sau các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập.
before(content, function(index))	Chèn nội dung content (html, text, jQuery objects, DOM) vào cuối các phần tử được chọn. function là hàm (tuỳ chọn) trả về nội dung chèn với index là vị trí chỉ số của phần tử trong tập.
$(content).appendTo( selector)	Chèn nội dung content (html) vào cuối các phần tử selector được chọn. Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.
$(content).prependTo( selector)	Chèn nội dung content (html) vào đầu các phần tử selector được chọn. Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.
$(content). insertBefore(selector)	Chèn nội dung content (html) vào trước các phần tử selector được chọn. Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.
$(content).insertAfter( selector)	Chèn nội dung content (html) vào sau các phần tử selector được chọn. Chú ý: Nếu content là phần tử tồn tại sẵn sẽ được di chuyển từ vị trí ban đầu đến vị trí cuối của selector.

Ví dụ về append(): chèn nội dung vào cuối các phần tử p

Đoạn mã HTML:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<ol>

  <li>List item 1</li>

  <li>List item 2</li>

  <li>List item 3</li>

</ol>

<button id="btn1">Append text</button>

<button id="btn2">Append list item</button>

Đoạn mã jQuery:

$("#btn1").click(function(){

  $("p").append(" <b>Appended text</b>.");

});

$("#btn2").click(function(){

  $("ol").append("<li>Appended item</li>");

});

Kết quả trên trình duyệt:

Khi nhấn nút Append text:

Ví dụ về append(): chèn nội dung vào cuối các phần tử p dùng hàm

Đoạn mã HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content at the end of each p element</button>

Đoạn mã jQuery:

$("button").click(function(){

   $("p").append(function(n){

      return "<b>This p element has index " + n + ".</b>";

   });

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về append(): chèn nội dung HTML, jQuery, DOM vào cuối phần tử p

Đoạn mã HTML:

<p>This is a paragraph.</p>

<button onclick="appendText()">Append text</button>

Đoạn mã jQuery:

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
 
}

Kết quả trên trình duyệt:

Khi nhấn Append text:

Ví dụ về prepend(): chèn nội dung vào đầu các phần tử p

Đoạn mã HTML:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<ol>

  <li>List item 1</li>

  <li>List item 2</li>

  <li>List item 3</li>

</ol>

<button id="btn1">Prepend text</button>

<button id="btn2">Prepend list item</button>

Đoạn mã jQuery:

$("#btn1").click(function(){

  $("p").prepend("<b>Prepended text</b>. ");

});

$("#btn2").click(function(){

  $("ol").prepend("<li>Prepended item</li>");

});

Kết quả trên trình duyệt:

Khi nhấn Prepend text

Khi nhấn Prepend list item

Ví dụ về prepend(): chèn nội dung HTML, jQuery, DOM vào đầu phần tử p

Đoạn mã HTML:

<p>This is a paragraph.</p>

<button onclick="prependText()">Prepend text</button>

Đoạn mã jQuery:

function prependText() {

   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

   $("p").prepend(txt1, txt2, txt3); // Prepend new elements

}

Kết quả trên trình duyệt:

Khi nhấn Prepend text

Ví dụ về prepend(): chèn nội dung vào đầu phần tử p bằng hàm

Đoạn mã HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content at the beginning of each p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").prepend(function(n){

    return "<b>This p element has index " + n + "</b>. ";

  });

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về after(): chèn nội dung vào sau phần tử p

Đoạn mã HTML:

<button>Insert content after each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").after("<p>Hello world!</p>");

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về after(): chèn nội dung vào sau phần tử p dùng hàm

Đoạn mã HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content after each p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").after(function(n){

      return "

         <div>The p element above has index " + n + ".</div>";

  });

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về after(): chèn nội dung HMTL, jQuery, DOM vào trước phần tử p

Đoạn mã HTML:

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">

<p>Click the button to insert text after the image.</p>

<button onclick="afterText()">Insert after</button>

Đoạn mã jQuery:

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

}

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về before(): chèn nội dung vào trước phần tử p

Đoạn mã HTML:

<button>Insert content before each p element</button>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").before("<p>Hello world!</p>");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về before(): chèn nội dung vào trước phần tử p bằng cách dùng hàm

Đoạn mã HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is another paragraph.</p>

<button>Insert content before each p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("p").before(function(n){

     return "

       <div>The p element below has index " + n + ".</div>";

  });

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về before(): chèn nội dung HTML, jQuery, DOM vào trước phần tử p

Đoạn mã HTML:

<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">

<p>Click the button to insert text before the image.</p>

<button onclick="beforeText()">Insert before</button>

Đoạn mã jQuery:

function beforeText() {

   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").before(txt1, txt2, txt3); // Insert new elements before img

}

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về prependTo(): chèn nội dung vào đầu mỗi phần tử p

Đoạn mã HTML:

<button>Insert span element at the beginning of each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("<span>Hello World! </span>").prependTo("p");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về prependTo(): chèn nội dung vào đầu mỗi phần tử p

Đoạn mã HTML:

<button>Insert span element at the beginning of each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Đoạn mã jQuery:

$("button").click(function(){

  $("<span>Hello World! </span>").prependTo("p");

});

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về prependTo(): chèn nội dung đã tồn tại vào đầu mỗi phần tử p

Đoạn mã HTML:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<div>Hello world!</div>

<button>Move and insert the div element before each p element</button>

Đoạn mã jQuery:

$("button").click(function(){

  $("div").prependTo("p");

});

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về appendTo(): chèn nội dung vào cuối mỗi phần tử p

Đoạn mã jQuery:

$("button").click(function(){

  $("<span>Hello World!</span>").appendTo("p");

});

Đoạn mã HTML:

<button>Insert span element at the end of each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về appendTo(): chèn nội dung tồn tại sẵn vào cuối mỗi phần tử p

Đoạn mã jQuery

$("button").click(function(){

  $("h1").appendTo("p");

});

Đoạn mã HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Move and insert the h1 element at the end of each p element</button>

Kết quả trên trình duyệt:

Khi nhấn button:

Ví dụ về insertBefore(): chèn nội dung vào trước mỗi phần tử p

Đoạn mã jQuery

$("button").click(function(){

  $("<span>Hello world!</span>").insertBefore("p");

});

Đoạn mã HTML:

<button>Insert span element before each p element</button>

<br><br>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về insertBefore(): chèn nội dung tồn tại sẵn vào trước mỗi phần tử p

Đoạn mã jQuery

$("button").click(function(){

  $("div").insertBefore("p");

});

Đoạn mã HTML:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>
<div>Hello world!</div>
<button>Move and insert the div element before each p element</button>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về insertAfter(): chèn nội dung vào sau mỗi phần tử p

Đoạn mã jQuery

$("button").click(function(){

 $("<span>Hello world!</span>").insertAfter("p");

});

Đoạn mã HTML:

<button>Insert span element after each p element</button>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Kết quả trên trình duyệt:

Khi nhấn button

Ví dụ về insertAfter(): chèn nội dung đã tồn tại vào sau mỗi phần tử p

Đoạn mã jQuery

$("button").click(function(){

  $("h1").insertAfter("p");

});

Đoạn mã HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Move and insert the h1 element after each p element</button>

Kết quả trên trình duyệt:

Khi nhấn button

Wrap và unwrap

jQuery cung cấp phương thức wrap dùng để biến đổi một hay nhiều phần tử trở thành bộ chứa chứa một hay nhiều phần tử khác bên trong. Cú pháp phương thức wrap():

Phương thức	Chức năng
wrap( wrappingElement,function( index))	Biến đổi phần tử wrappingElement thành bộ chứa chứa mỗi phần tử được chọn. wrappingElement có thể là phần tử HTML, đối tượng jQuery, hay phần tử DOM. Hàm tuỳ chọn function(index) trả về phần tử wrappingElement, index là vị trí của phần tử trong tập.

Ví dụ 1: biến phần tử div thành bộ chứa chứa phần tử p:

Mã HTML

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Wrap a div element around each p element</button

Mã CSS

div{background-color: yellow;}

Mã jQuery

$("button").click(function(){

  $("p").wrap("<div></div>");

});

Ví dụ 2: biến phần tử div thành bộ chứa chứa phần tử p bằng phương thức wrap có sử dụng hàm function:

Mã HTML

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Wrap a div element around each p element</button>

Mã CSS

div{background-color: yellow;}

Mã jQuery

$("button").click(function(){

  $("p").wrap(function(){

     return "<div></div>";

  });

});

Đặc điểm chung của hai ví dụ trên là khi nhấn button thì mỗi phần tử p sẽ được chứa trong phần tử div như sau:

<div>

  <div><p>This is a paragraph.</p></div>

  <div><p>This is another paragraph.</p></div>

</div>

<div>

<div>

  <p>This is a paragraph.</p>

  <p>This is another paragraph.</p>

</div>