VIẾT LẠI PARAGRAPH MỚI BẰNG CÁCH DÙNG document.getElementsByTagName() và innerHTML
Chép bản html trên vào notepad rồi mở browser sẽ thấy lần lượt xuất hiện như sau.
1- Thân Ái Chào Quý Bạn !
2- Hôm nay 4-July là ngày sinh nhật của USA
3- Chúng ta muốn xóa bỏ paragraph số 3 nầy
để viết lại paragraph khác vào chỗ nầy
1- Thân Ái Chào Quý Bạn !
2- Hôm nay 4-July là ngày sinh nhật của USA
3- USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ
Trong trường hợp nầy,chúng ta muốn xóa bỏ paragraph số 3 để viết lại theo ý muốn nên đã chọn (“p”)[2]. Nếu muốn xóa paragraph số 1 thì chọn (“p”)[0]. Chọn (“p”)[1] nếu muốn xóa paragraph số 2.
Lưu ý kiểu chữ,màu sắc chữ ,độ lớn chữ v.v.. trong paragraph sắp viết vào để thay thế sẽ tự động giống hệt như paragraph bị xóa bỏ.
Nếu không muốn như vậy thì trong script phải viết thêm span tag rồi đặt giữa 2 dấu \".....\".
Thí dụ viết span style=\"color:blue;font-size:45px \" thì paragraph 3 sẽ hiện ra như sau.
3-USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ
Nếu paragraph quá dài thì phải dùng dấu " \ " gọi là backslash để cắt paragraph từng phần.Thí dụ muốn viết paragraph dài như thế nầy :
3- USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.
Thì phải viết trong script như thế nầy mới có kết quả :
document.getElementsByTagName("p")[2].innerHTML=" 3- USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.\ USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.\ USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.\ USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.\ USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ.\ USA là Tình Thương,Tiến Bộ,Tự Do & Dân Chủ."
----------------------------------
Nếu muốn kết hợp với childNodes[ ] thi trong script trên đổi ra như thế nầy.
var x=document.getElementsByTagName("p")[2]
x.document.body.childNodes[2].innerHTML="....."
Kết quả sẽ hòan toàn giống như trên.
Cũng có thể chọn cách viết : x.document.body.childNodes[1].nextSibling.innerHTML="..."
hoặc : x.document.body.chilNodes[1].previousSibling.innerHTML="..."