Tất cả những gì bạn cần biết về HTML bên trong trong JavaScript

JavaScript là một trong những ngôn ngữ lập trình được sử dụng rộng rãi nhất. Nó cũng khá phổ biến vì tính linh hoạt trên các nền tảng. Có các thuộc tính khác nhau trong giúp bạn xây dựng một trang web động dễ dàng hơn. Trong bài viết này, chúng ta sẽ thảo luận về HTML bên trong trong JavaScript theo trình tự sau:

• Giới thiệu về JavaScript
• HTML bên trong trong JavaScript
  • Danh sách có thứ tự hoặc không có thứ tự
  • Thay đổi URL

Giới thiệu về JavaScript

JavaScript được sử dụng làm ngôn ngữ lập trình phía máy khách cũng như ngôn ngữ lập trình phía máy chủ. được sử dụng để thực thi ở phía máy khách cũng như phía máy chủ của bất kỳ ứng dụng nào. Một nút cũng có thể được gọi là Node.js ở một số nơi.

JavaScript cung cấp rất nhiều phương pháp để một số chức năng được thực hiện một cách dễ dàng. Đây là điều đã làm cho JavaScript trở thành một trong những ngôn ngữ lập trình phổ biến nhất cũng như nó cũng đang được sử dụng rộng rãi trên một số loại hình phát triển sản phẩm.

HTML bên trong trong JavaScript

Bên trong thuộc tính trong JavaScript là một trong những tính năng rất tiện dụng và được sử dụng rộng rãi để cung cấp khía cạnh năng động và linh hoạt hơn cho các trang web đang được tạo.

Nếu chúng ta cố gắng giải thích innerHTML một cách đơn giản thì công việc được thực hiện bởi innerHTML chỉ đơn giản là tải nội dung trang mà không làm mới toàn bộ trang. Điều này giúp tiết kiệm dữ liệu sử dụng cũng như thời gian tải trang sau đó và khá dễ dàng để đạt được. Điều này mang lại cho người dùng cảm giác rất nhanh và nhạy do đó làm cho trải nghiệm người dùng tốt hơn nhiều.

Nghe có vẻ hơi khó nhưng chúng ta hãy cố gắng hiểu điều này với sự trợ giúp của một ví dụ.

Thí dụ:

 
Bấm vào đây để thay đổi văn bản bên trongHTML.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Đoạn văn đã thay đổi!' }

Ở đây trong đoạn mã trên, trong thẻ đoạn văn, id của đoạn mã đó là đoạn1.

là một mối quan hệ java

Đây là một chức năng được đặt tên là my Chức năng () sẽ bị thu hồi khi nhấp vào văn bản “Nhấp vào đây để thay đổi văn bản innerHTML”.Khi chức năng bị thu hồi khi nhấp chuột, hàm sẽ được thực thi với nội dung getElementById (“paragraph1”), cho biết phần tử có Id làm bản trình diễn sẽ được chọn.

Hơn nữa, chúng ta có hàm innerHTML có nghĩa đơn giản là sau khi nhấp vào những gì sẽ được thực hiện. Ở đây trong ví dụ trên, nó chỉ đơn giản là 'Đoạn văn đã được thay đổi'.

Dưới đây là đầu ra ban đầu của đoạn mã trên.

Dưới đây là kết quả thay đổi sau khi nhấp chuột.

HTML bên trong với danh sách có thứ tự hoặc không có thứ tự

Dưới đây là một ví dụ cho thấy việc sử dụng innerHTML với danh sách có thứ tự hoặc không có thứ tự.

Thí dụ:

 
 
xin chào
 
xin chào lần nữa
 
 
Nhấp vào nút bên dưới để lấy nội dung của phần tử ul.
Hãy dùng thử hàm helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}

Ở đây, innerHTML được kích hoạt bởi nút được xác định bằng tên 'Hãy thử'.

Đầu ra ban đầu của văn bản trên là:

Đầu ra sau khi nhấp vào nút. Việc nhấp vào nút không dẫn đến việc tải lại trang mà thay vào đó là do việc sử dụng innerHTML.

InnerHTML để thay đổi URL

Dưới đây là một ví dụ khác cho thấy việc sử dụng innerHTML để thay đổi URL khi nhấp vào nút.

Thí dụ:

  Wikipedia Thay đổi hàm liên kết myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

Ví dụ trên ban đầu cung cấp liên kết đến trang web Wikipedia nhưng khi nhấp vào nút, liên kết chuyển thành Google.

Có một số hoạt động như vậy trong đó innerHTML có ích khi trang không được tải lại và chỉ một phần được cập nhật.Điều này giúp tiết kiệm thời gian cũng như ít nỗ lực hơn cho phương pháp này.Ưu điểm lớn nhất của innerHTML là trải nghiệm người dùng được nâng cao với tính năng này.

Kiểm tra của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn Học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).

Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của “Kết nối chuỗi trong JavaScript” và chúng tôi sẽ liên hệ lại với bạn.