Tạo phần tử trong vòng lặp javascript

setAttribute(tên thuộc tính, giá trị) – đây là phương thức của mọi đối tượng phần tử. Mọi phần tử HTML được coi là đối tượng từ mã JavaScript. Chúng ta có thể đặt giá trị của một thuộc tính. Chúng tôi đã sử dụng các thuộc tính trước đây, chúng là các thuộc tính được thêm vào thẻ, trong mã HTML

appendChild(an element created) – đây là phương thức của mọi đối tượng phần tử giống như phương thức setAttribute. Nó được sử dụng để thêm một phần tử vào bên trong một phần tử khác. Phần tử được gọi trong tham số, là phần tử được thêm vào phương thức mà chúng tôi sử dụng

removechild(tham chiếu đến một phần tử) – phương thức này, giống như appendChild có thể được sử dụng với mọi đối tượng phần tử. Phần tử được gọi là tham số sẽ bị xóa khỏi bên trong phần tử mà phương thức thuộc về

Viết mã JavaScript trong tệp bên ngoài.
Việc sử dụng tệp bên ngoài để lưu trữ mã JavaScript rất hữu ích vì tệp có thể được tham chiếu từ các tệp HTML khác nhau. Một tệp HTML có thể sử dụng nhiều tệp JS.
Tách riêng tập lệnh và mã HTML, giúp công việc của chúng tôi dễ đọc hơn.
Cách tham chiếu tệp JS.

Cách chèn dấu ngoặc kép vào văn bản JavaScript.
Nếu chúng ta muốn thêm dấu ngoặc kép vào văn bản, chúng ta có thể gặp vấn đề, vì văn bản cố định được đặt theo mặc định trong dấu ngoặc kép. Chúng ta có thể thay đổi dấu đơn và dấu kép nhưng chúng ta có thể cần sử dụng ký hiệu \ để đánh dấu dấu ngoặc kép mà chúng ta cần thực sự xuất hiện trong văn bản. Đây được gọi là ký tự thoát. (Đọc thêm tại đây. https. // vi. wikipedia. org/wiki/Escape_character)

Ví dụ về văn bản có trích dẫn

Trong ví dụ trên, nhấp vào phần màu, một nút xuất hiện. Mã HTML cho nút được xây dựng bên trong một chức năng

Đối với dấu ngoặc kép sẽ được hiển thị, chúng tôi đã thêm ký hiệu \, các dấu ngoặc kép khác biểu thị phần đầu hoặc phần cuối của chuỗi

Kết quả có thể được xem trong trình duyệt và mã có thể được kiểm tra để xem nội dung thực tế. (Sử dụng nhấp chuột phải. ) Chỉ các dấu ngoặc kép được đánh dấu mới xuất hiện

Vòng lặp for.
Nếu chúng ta cần lặp lại một số lệnh nhiều lần, chúng ta có thể sử dụng các vòng lặp.
Vòng lặp for chủ yếu được sử dụng khi biết số lần lặp lại, nhưng nó có thể được điều chỉnh cho phù hợp với mọi trường hợp.

Hình thức của vòng lặp for chúng ta sẽ sử dụng

câu lệnh for (i=1; i<=nr; i++) {;}
statements;
}

Khi chúng ta vào vòng lặp, biến chỉ số (không cần thiết là i), nhận giá trị ban đầu (không cần thiết là 1). Sau đó, lặp lại các câu lệnh và kiểm tra sau mỗi lần lặp lại nếu điều kiện là đúng để tiếp tục và thay đổi giá trị chỉ mục (với một, trong phần trên, nhưng điều đó cũng có thể được thay đổi). Nếu điều kiện sai thì vòng lặp dừng

Ví dụ về cách sử dụng vòng lặp for

Trong ví dụ trên, bạn tìm thấy hai vòng lặp for để xem chúng hoạt động như thế nào. Cài đặt CSS không hiển thị trên ảnh này, vì vậy chúng tôi tập trung vào mã JavaScript

Vòng lặp đầu tiên lặp lại 10 lần thêm giá trị của biến i vào nội dung của phần đầu tiên của trang web. Các giá trị của biến i theo thứ tự. 1 2 3 4 5 6 7 8 9 10

Nội dung của phân khúc bị xóa vì có thể có nhiều nhấp chuột hơn vào một phân khúc và phân khúc đó sẽ đầy

Vòng lặp thứ hai tương tự như vòng lặp đầu tiên, nhưng cho chúng ta thấy rằng chúng ta có thể hoàn thành mã HTML từ JavaScript. chúng tôi thêm mười nút từ chức năng và thậm chí xác định hộp cảnh báo sẽ hiển thị khi nhấp vào các nút này

Bạn có thể xem nội dung sau khi đánh giá mã JavaScript khi kiểm tra trang

vòng lặp while

Đây là một cách khác để lặp lại các lệnh là vòng lặp while.
So với vòng lặp for, vòng lặp while chỉ cần 1 điều kiện để quyết định đến khi nào lặp lại câu lệnh, đặt trong ngoặc.

Dạng vòng lặp while.

trong khi (điều kiện) {
         hướng dẫn;
}

Nếu điều kiện đúng ta lặp lại, nếu sai ta dừng vòng lặp.

Ví dụ về vòng lặp while.

Trong ví dụ trên, vòng lặp while đầu tiên có cùng tác dụng với vòng lặp for đầu tiên của chúng ta. Chúng tôi cần thêm giá trị ban đầu cho biến i và hướng dẫn tăng giá trị đó một cách riêng biệt. Giá trị ban đầu được xác định bên ngoài vòng lặp, việc tăng được lặp lại

Vòng lặp thứ hai, thêm 10 số ngẫu nhiên vào phần thứ hai. Mỗi lần nhấp vào hình chữ nhật màu xanh lục sẽ tạo ra 10 giá trị mới từ 1 đến 101

Ví dụ về việc thêm/xóa các phần mới khỏi mã JS

Trong ví dụ trên, bạn có thể thấy cách thêm/xóa các phần tử mới vào/khỏi tài liệu một cách chính xác. Trong một trong những ví dụ trước, chúng ta vừa “viết” chúng (một số nút) bên trong một phần tử hiện có. Việc thêm các phần tử vào InternalHTML dưới dạng văn bản hoạt động, nhưng nó có thể vô hiệu hóa các trình xử lý sự kiện đã hoạt động, rất phức tạp để loại bỏ một trong các phần tử hoặc thêm một phần tử mới mà không làm phiền những phần tử đã có ở đó

Chúng tôi sử dụng chức năng randcolor từ 24. bài học

Hàm newdiv được gọi khi nút đầu tiên được nhấp vào. Tạo một phần tử div mới sau đó được tham chiếu bởi biến d. Chúng ta thêm một giá trị vào thuộc tính id để sau này có thể tìm thấy div bằng hàm deldiv. Id là duy nhất bởi vì chúng tôi sử dụng một số trong đó, số này luôn được tăng lên khi cần có phần tử mới

Với phương thức appenChild, chúng tôi thêm div vào tài liệu, sau đó chúng tôi thêm một màu ngẫu nhiên làm màu nền để nhìn rõ hơn phần nào mới được thêm hoặc bị xóa

Hàm deldiv xóa phần cuối cùng khỏi tài liệu. Chúng tôi có thể loại bỏ bất kỳ trong số chúng, nhưng nó hơi phức tạp đối với ví dụ đầu tiên. Phương thức removeChild được sử dụng để làm cho div cuối cùng biến mất

Làm cách nào để thêm các phần tử trong một mảng JavaScript cho vòng lặp?

Làm cách nào để thêm giá trị bằng vòng lặp for trong JavaScript?

Phương thức createElement() là gì?

Làm cách nào để lưu trữ các giá trị vòng lặp trong JavaScript?