Cách thay đổi nội dung div động trong JavaScript

Một cách mà JavaScript thường được sử dụng là ẩn hoặc hiển thị nội dung dựa trên hành vi của người dùng. Ví dụ: người dùng có thể chọn một tùy chọn khi điền vào biểu mẫu trực tuyến và lựa chọn của họ có thể khiến các trường biểu mẫu liên quan khác xuất hiện. Trong bài học này, bạn sẽ sử dụng CSS và Javascript để hiển thị và ẩn đồng hồ mà bạn đã tạo

Kết quả của người học

Khi hoàn thành bài tập này

  • bạn sẽ có thể sử dụng CSS để ẩn và hiển thị nội dung
  • bạn sẽ có thể sử dụng JavaScript để thay đổi và các thuộc tính CSS của phần tử HTML

Các hoạt động

Thông lệ phổ biến trên web ngày nay là ẩn nội dung khỏi người dùng cho đến khi cần thiết. Trong bài này các bạn sẽ ẩn đồng hồ đi, sau đó thêm link mà nếu click vào sẽ hiện đồng hồ

mở javascript. html trong cả trình soạn thảo văn bản và trình duyệt web của bạn. Chuyển đến biểu định kiểu mà bạn đã tạo cho div#clock trong bài học trước. Thêm thuộc tính sau vào biểu định kiểu

Bây giờ làm mới trang của bạn trong trình duyệt của bạn. Chuyện gì đã xảy ra thế? . Đây là một trong một số cách để ẩn nội dung bằng CSS. Để hiển thị lại phần tử, bạn sẽ thay đổi thuộc tính này thành

Tuy nhiên, trong trường hợp này, chúng tôi chỉ muốn hiển thị phần tử nếu người dùng yêu cầu cụ thể. Vì vậy, chúng tôi sẽ phải thay đổi kiểu động, sử dụng JavaScript, được kích hoạt bởi sự kiện onclick

Đầu tiên, thêm phần tử mà bạn muốn người dùng nhấp vào

Hiển thị đồng hồ

Lưu ý rằng nút này về cơ bản giống như nút bạn đã tạo trong Bài 1 để hiển thị cảnh báo. Có một sự khác biệt quan trọng mặc dù. Nút này có thuộc tính id. Đó là để bạn có thể truy cập nó dễ dàng bằng JavaScript (bạn sẽ hiểu tại sao trong giây lát)

Bây giờ bạn đã có một nút mà khi được nhấp vào sẽ gọi hàm toggleClock(), bạn cần tạo một hàm toggleClock(). Đây là chức năng đó - chỉ cần thêm nó vào phần tập lệnh hiện có ở đầu trang web của bạn

  function toggleClock() {
    // get the clock
    var myClock = document.getElementById('clock');

    // get the current value of the clock's display property
    var displaySetting = myClock.style.display;

    // also get the clock button, so we can change what it says
    var clockButton = document.getElementById('clockButton');

    // now toggle the clock and the button text, depending on current state
    if (displaySetting == 'block') {
      // clock is visible. hide it
      myClock.style.display = 'none';
      // change button text
      clockButton.innerHTML = 'Show clock';
    }
    else {
      // clock is hidden. show it
      myClock.style.display = 'block';
      // change button text
      clockButton.innerHTML = 'Hide clock';
    }
  }

Trong hàm toggleClock() mới này, bạn đang sử dụng JavaScript để truy xuất phần tử đồng hồ, lấy giá trị hiện tại của kiểu hiển thị của nó, sau đó kiểm tra nó. Nếu màn hình hiện đang được đặt thành "khối", đồng hồ sẽ hiển thị, vì vậy bạn thay đổi màn hình thành "không" để ẩn đồng hồ. Nếu đồng hồ đã bị ẩn, bạn thay đổi hiển thị thành "chặn" để hiển thị lại. Trong khi bạn đang chuyển đổi qua lại màn hình của đồng hồ từ "khối" thành "không", bạn cũng đang thay đổi văn bản (HTML bên trong) trên nút đồng hồ, sao cho luân phiên giữa "Hiển thị đồng hồ" và "Ẩn đồng hồ", tùy thuộc vào

Tất cả đã được làm xong?

Kiểm tra trang web của bạn và đảm bảo rằng bạn có thể hiển thị và ẩn đồng hồ bằng nút mới. Ngoài ra, hãy đảm bảo văn bản của nút thay đổi từ "Hiển thị đồng hồ" thành "Ẩn đồng hồ" khi thích hợp. Chia sẻ trang web của bạn với người hướng dẫn của bạn. Nếu tất cả đều ổn, hãy chuyển sang bài học tiếp theo

Các yếu tố

Hey there!!

2 về bản chất là không tương tác. Javascript truyền sức sống vào nó bằng cách làm cho nó có tính tương tác. Chúng tôi có thể cần viết lại văn bản được hiển thị bởi một

Hey there!!

2. Chẳng hạn, trong khi triển khai chức năng Chỉnh sửa, chúng tôi có thể sử dụng lại các màn hình được thiết kế để phát triển tính năng Thêm. Chỉ cần thay đổi từ ngữ. Đối với chức năng Thêm, chúng tôi có thể cần phải viết lại từ khóa

Hey there!!

4 của một nút thành

Hey there!!

5, v.v. Chúng ta hãy xem xét một vài cách để chúng ta có thể thay đổi văn bản của div một cách linh hoạt

Thay đổi văn bản Hey there!! 2 bằng thuộc tính Hey there!! 7

Không giống như các ngôn ngữ lập trình khác, chúng tôi không sử dụng các phương thức getter và setter để đặt văn bản thành các phần tử HTML. Đối tượng phần tử HTML cho div có một thuộc tính được gọi là

Hey there!!

7. Chúng ta có thể sử dụng nó để lấy và thiết lập nội dung của đối tượng HTML. Ở đây đối tượng HTML sẽ hoạt động. Nghĩa là, nó phản ánh bất kỳ thay đổi nào đối với thuộc tính phần tử trong trình duyệt khi làm mới

Sau đây là cú pháp sử dụng InternalHTML

________số 8_______

Trong đoạn mã trên, chúng tôi nhận được nội dung của một phần tử HTML

Hey there!!

2 bằng cách sử dụng
window.onload = function() {
    document.getElementById("div-element").innerHTML = "Hello World!!";
    console.log(document.getElementById("div-element").innerHTML);
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!";
    console.log(document.getElementById("div-element").innerHTML);
}
0. Ở đây,
window.onload = function() {
    document.getElementById("div-element").innerHTML = "Hello World!!";
    console.log(document.getElementById("div-element").innerHTML);
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!";
    console.log(document.getElementById("div-element").innerHTML);
}
1 là đối tượng HTML thực tế. Tương tự, chúng ta có thể đặt nội dung thành

Hey there!!

2 bằng cách sử dụng thuộc tính tương tự, ____1_______7 của phần tử. Chúng ta chỉ gán nội dung văn bản cho

Hey there!!

7

Hey there!!

window.onload = function() {
    document.getElementById("div-element").innerHTML = "Hello World!!";
    console.log(document.getElementById("div-element").innerHTML);
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!";
    console.log(document.getElementById("div-element").innerHTML);
}

đầu ra

Hello World!!
Hello bunny!!

Trước khi áp dụng

window.onload = function() {
    document.getElementById("div-element").innerHTML = "Hello World!!";
    console.log(document.getElementById("div-element").innerHTML);
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!";
    console.log(document.getElementById("div-element").innerHTML);
}
5, chúng ta cần chọn phần tử HTML. Chúng ta có thể làm điều đó theo nhiều cách khác nhau. Javascript có nhiều chức năng mà chúng ta có thể sử dụng để truy vấn các phần tử từ DOM. Sau đây là một số phương pháp được sử dụng phổ biến nhất

  • window.onload = function() {
        document.getElementById("div-element").innerHTML = "Hello World!!";
        console.log(document.getElementById("div-element").innerHTML);
        var el = document.getElementById("div-element");
        el.textContent = "Hello bunny!!";
        console.log(document.getElementById("div-element").innerHTML);
    }
    
    6. Chức năng này của giao diện
    window.onload = function() {
        document.getElementById("div-element").innerHTML = "Hello World!!";
        console.log(document.getElementById("div-element").innerHTML);
        var el = document.getElementById("div-element");
        el.textContent = "Hello bunny!!";
        console.log(document.getElementById("div-element").innerHTML);
    }
    
    7 được sử dụng để chọn một phần tử từ
    window.onload = function() {
        document.getElementById("div-element").innerHTML = "Hello World!!";
        console.log(document.getElementById("div-element").innerHTML);
        var el = document.getElementById("div-element");
        el.textContent = "Hello bunny!!";
        console.log(document.getElementById("div-element").innerHTML);
    }
    
    8 bằng cách sử dụng
    window.onload = function() {
        document.getElementById("div-element").innerHTML = "Hello World!!";
        console.log(document.getElementById("div-element").innerHTML);
        var el = document.getElementById("div-element");
        el.textContent = "Hello bunny!!";
        console.log(document.getElementById("div-element").innerHTML);
    }
    
    9 của nó, được chỉ định trong HTML. Hàm trả về đối tượng HTML tương ứng với phần tử được chọn
  • Hello World!!
    Hello bunny!!
    
    0. Chúng ta có thể truy vấn phần tử dựa trên
    Hello World!!
    Hello bunny!!
    
    1 với hàm
    Hello World!!
    Hello bunny!!
    
    0. Nhiều phần tử được trả về dưới dạng một mảng các đối tượng HTML theo phương thức javascript này
  • Hello World!!
    Hello bunny!!
    
    3. Có một cách khác để chọn các phần tử có thuộc tính
    Hello World!!
    Hello bunny!!
    
    4. Chúng tôi chỉ định thuộc tính tên cho nút trong HTML. Phương thức này trả về một mảng gồm
    Hello World!!
    Hello bunny!!
    
    5 đối tượng. Chúng tôi có thể sử dụng nó, đặc biệt nếu chúng tôi quan tâm đến việc chọn nhiều thành phần với một kiểu, lớp CSS cụ thể và hành động theo tất cả chúng cùng một lúc
  • Hello World!!
    Hello bunny!!
    
    6. Chúng ta cũng có thể chọn phần tử dựa trên các thẻ HTML của chúng bằng hàm
    Hello World!!
    Hello bunny!!
    
    7. Chẳng hạn, chúng ta có thể thực hiện một số thao tác trên tất cả các phần tử

    Hey there!!

    2 trong một phần của
    window.onload = function() {
        document.getElementById("div-element").innerHTML = "Hello World!!";
        console.log(document.getElementById("div-element").innerHTML);
        var el = document.getElementById("div-element");
        el.textContent = "Hello bunny!!";
        console.log(document.getElementById("div-element").innerHTML);
    }
    
    8, v.v. Như tên gợi ý, hàm trả về một mảng gồm
    Hello World!!
    Hello bunny!!
    
    5 đối tượng
  • Hey there!!

    1. Hàm

    Hey there!!

    1 trong Javascript chung chung hơn một chút và có thể được sử dụng để chọn các phần tử
    Hello World!!
    Hello bunny!!
    
    5 với

    Hey there!!

    4. Hàm trả về phần tử đầu tiên thỏa mãn điều kiện được truyền trong tham số của nó
  • Hey there!!

    5. Cái này tương tự như cái

    Hey there!!

    1, với điểm khác biệt duy nhất là nó sẽ trả về nhiều hơn một phần tử thỏa mãn định dạng

    Hey there!!

    4 được truyền dưới dạng tham số cho nó

Thay đổi nội dung của Div với thuộc tính nút Hey there!! 8

Mặc dù chúng tôi sử dụng

Hey there!!

7 khá thường xuyên, vẫn có rủi ro bảo mật liên quan đến việc sử dụng nó. Nó liên quan đến cách

Hey there!!

7 thay thế nội dung của phần tử
Hello World!!
Hello bunny!!
5. Thuộc tính

Hey there!!

7 loại bỏ tất cả các nút HTML phụ trong một lần chụp và thêm nội dung mới như được chỉ định trong đó

Rủi ro bảo mật xuất hiện khi thuộc tính

Hey there!!

7 cho phép chúng tôi chèn bất kỳ đoạn mã HTML nào, ngay cả khi đó là mã có hại. Chúng ta sẽ thảo luận về khía cạnh này trong phần tiếp theo. MDN khuyến nghị sử dụng
window.onload = function() {
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!"
}
4 để thay đổi văn bản của một phần tử. Nó thay thế các nút con bên trong HTML bằng
window.onload = function() {
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!"
}
5 mà chúng tôi gán trong tham số

Hey there!!

8. Tham khảo đoạn mã sau để hiểu cách sử dụng

Hey there!!

window.onload = function() {
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!"
}

đầu ra

Ở đây, chúng tôi chọn phần tử HTML,

Hey there!!

2, trước khi thay đổi văn bản. Chúng tôi sử dụng hàm
window.onload = function() {
    document.getElementById("div-element").innerHTML = "Hello World!!";
    console.log(document.getElementById("div-element").innerHTML);
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!";
    console.log(document.getElementById("div-element").innerHTML);
}
6 để truy vấn phần tử từ DOM. Sau đó, chúng tôi sử dụng

Hey there!!

8 để thay đổi văn bản của

Hey there!!

2. Thay đổi này sẽ không được phân biệt khi tải màn hình. Ngay khi trình duyệt tải trang web, hàm

1 được thực thi và thay đổi văn bản sẽ xảy ra. Vì vậy, người dùng cuối luôn nhìn thấy văn bản mới hơn. Việc thay đổi văn bản cũ thành văn bản mới không rõ ràng khi tải màn hình. Chúng ta cũng có thể sử dụng phương thức

Hey there!!

8 bên trong phương thức

3 để xem sự thay đổi

Innerhtml Vs _______ 56 _______ 4 Khía cạnh bảo mật

Thuộc tính

Hey there!!

7 khác với thuộc tính

Hey there!!

8. Cả hai thuộc tính đều lấy
window.onload = function() {
    var el = document.getElementById("div-element");
    el.textContent = "Hello bunny!!"
}
5 làm đầu vào, nhưng lỗ hổng bảo mật ở đây là gì? . Tham khảo đoạn mã sau. Tại đây, sự thay đổi được phản ánh và mã InternalHTML sẽ được thực thi. Như được hiển thị trong đoạn mã sau, khi nhấp vào phần tử HTML

Hey there!!

2 màu lục nhạt, một
window.onload = function() {
    var el = document.getElementById("div-element");
    el.innerHTML = `

`; }

0 không mong muốn sẽ bật lên trên màn hình


window.onload = function() {
    var el = document.getElementById("div-element");
    el.innerHTML = `

`; }

Nếu chúng ta chỉ định cùng một nội dung trong phần tử

Hey there!!

8 cho phần tử

Hey there!!

2, nó sẽ không hiển thị phần tử đó dưới dạng phần tử HTML. Javascript hiển thị nội dung dưới dạng văn bản trên màn hình. Vì vậy, chúng ta có thể thấy theo nghĩa đen

hiển thị dưới dạng văn bản trong trang web. Khía cạnh này làm cho mã an toàn và đáng tin cậy hơn. Do đó, nếu chúng ta có ý định thay đổi văn bản của một phần tử HTML, thì các phương pháp hay nhất về Javascript (do MDN hỗ trợ) khuyên bạn nên sử dụng thuộc tính

Hey there!!

8 thay vì thuộc tính

Hey there!!

7


window.onload = function() {
    var el = document.getElementById("div-element");
    el.textContent = `

`; }

Thay đổi văn bản Hey there!! 2 bằng phần tử giả window.onload = function() { var el = document.getElementById("div-element"); el.innerHTML = ``; } 6

Nếu thay đổi văn bản là không đáng kể, chúng ta có thể sử dụng CSS để thay đổi văn bản

Hey there!!

2. Chúng tôi sử dụng phần tử HTML giả
window.onload = function() {
    var el = document.getElementById("div-element");
    el.innerHTML = `

`; }

6, trong đó chúng tôi thêm văn bản mà chúng tôi muốn hiển thị trong thuộc tính
window.onload = function() {
    var el = document.getElementById("div-element");
    el.innerHTML = `

`; }

9. Nó không áp dụng cho các phần tử HTML như

0 khi trình duyệt thay thế nội dung bằng hình ảnh được tải. Đoạn mã sau chi tiết cách sử dụng

Làm cách nào để thay đổi nội dung div bằng JavaScript?

Một cách để thay thế văn bản bên trong phần tử div bằng JavaScript là đặt thuộc tính innerHTML của phần tử thành một giá trị khác . div. innerHTML = "Văn bản mới của tôi. "; để chọn div với querySelector.

Làm cách nào để thay đổi văn bản động trong JavaScript?

Tạo phần tử nhãn và gán id cho phần tử đó
Xác định một nút được sử dụng để gọi một chức năng. Nó hoạt động như một công tắc để thay đổi văn bản trong phần tử nhãn
Xác định hàm javaScript, hàm này sẽ cập nhật văn bản nhãn
Sử dụng thuộc tính innerHTML để thay đổi văn bản bên trong nhãn

Làm cách nào để thay thế một div bằng một div khác trong JavaScript?

Làm cách nào để thay thế div bằng một div khác trong javascript? .
Đầu tiên sao chép div mong muốn
Thứ hai làm trống div chính
Thứ ba thêm bản sao vào div chính

Làm cách nào để thay đổi nội dung bằng JavaScript?

Cách dễ nhất để sửa đổi nội dung của phần tử HTML là sử dụng thuộc tính innerHTML. .
The HTML document above contains an

element with id="id01".

Chúng tôi sử dụng HTML DOM để lấy phần tử có id="id01"
JavaScript thay đổi nội dung ( innerHTML ) của phần tử đó thành "Tiêu đề mới"