programming javascript

Hướng dẫn javascript add complex html element - javascript thêm phần tử html phức tạp

Tôi có một trang web liệt kê rất nhiều yếu tố [phim cụ thể], cấu trúc HTML của mọi mục theo một cách nào đó lớn và phức tạp [divs, hình ảnh, liên kết, lớp CSS, v.v.].

Đầu tiên tôi tải 100 phần tử và người dùng có tùy chọn tải 100 tiếp theo [điều này được thực hiện bằng cách sử dụng cuộn vô hạn]: Bây giờ, tôi thực hiện một bản kiến nghị AJAX yêu cầu 100 yếu tố khác và nó phản hồi bằng văn bản HTML [với tất cả chúng đã tải] và tôi chỉ nối nó vào tài liệu.

Nhưng, bây giờ tôi không muốn trả lời bằng văn bản HTML, thay vì điều đó tôi muốn trả lời với 100 phần tử dữ liệu trong JSON [tôi có thể làm điều đó], sau đó, câu hỏi của tôi là: đó là cách tốt nhất để thêm Các yếu tố này cho tài liệu bằng JavaScript?

Tôi biết rằng tôi có thể lặp qua mảng JSON và xây dựng mọi yếu tố, nhưng như tôi đã nói, đó là một cấu trúc HTML lớn và tôi không thực sự muốn tạo các div và sau đó gắn nó vào một div khác, đặt các lớp CSS, v.v. , bởi vì nó có thể bị rối loạn, lộn xộn và rất lớn ... Vì vậy, có một cách trong JavaScript để đạt được điều này có thể sử dụng một cái gì đó như các mẫu? Làm thế nào tôi có thể làm điều đó? Tôi chỉ muốn có được một mã sạch và tốt hơn.

Cấu trúc của mọi bộ phim là như thế này [tôi có thể sử dụng nó như một mẫu không?]:

 
        
        
            
                
                
                    
                        Movie title
                    

                    
                        Details
                        My button

Ảnh của Pankaj Patel trên unplash

Mô hình đối tượng DOM hoặc tài liệu, là một phần không thể thiếu trong công việc của nhà phát triển web. Bởi vì nó đại diện cho cây phần tử được tìm thấy trong một trang web, nó xác định cấu trúc cơ bản của những gì trình duyệt cung cấp cho người dùng.

Mặc dù bạn có thể thêm và thao tác các phần tử DOM với JavaScript, mã hóa logic cho nó có thể cồng kềnh và lặp đi lặp lại nếu phần tử có nhiều thuộc tính và thuộc tính. Trong hướng dẫn này, chúng tôi sẽ tạo một phương thức cho phép bạn thêm các yếu tố phức tạp nhỏ gọn hơn.

Một ví dụ cấu trúc html dom

Đối với những người bạn không quen thuộc với khái niệm DOM, đó là cấu trúc phân cấp của các yếu tố HTML trên trang web. Đây là một mẫu nhanh dưới đây.

Một mẫu HTML DOM.

Thêm phần tử DOM với JavaScript

Ngoài việc mã hóa một trang như trang trên hoặc yêu cầu một trang web sử dụng cơ sở dữ liệu để hiển thị phía máy chủ DOM, chúng tôi cũng có thể viết JavaScript thêm phần tử DOM và đưa ra các thuộc tính. Hãy cùng xem xét ba cách tiếp cận này.

Cách tiếp cận 1: Không có phương pháp bổ sung

Trong mẫu mã bên dưới, chúng tôi đang thêm một phần tử

0 và cung cấp cho nó một số thuộc tính [

2 và

3] cũng như ba thuộc tính [

5 và

6].

Tạo một yếu tố với vani JavaScript.

Trong khi điều này hoạt động, chúng tôi phải viết

0 sáu lần và chúng tôi phải viết

8 ba lần. Và nhiều thuộc tính hoặc thuộc tính hơn sẽ có nghĩa là lặp lại nhiều hơn.

Cách tiếp cận 2: Gọi một phương thức tiện ích

Điều đó nói rằng, chúng ta có thể đưa sự lặp lại ra khỏi nó bằng cách viết một phương thức tiện ích tùy chỉnh cho phép chúng ta tạo các phần tử DOM theo cách nhỏ gọn hơn này:

Mẫu Createl Gọi phương thức. Hãy để điều này có thể!

Trong ví dụ trên, chúng tôi gọi phương thức

9 là một phần của đối tượng

let utils = {};

0 mới. Khi làm như vậy, chúng tôi chuyển qua một đối tượng với các thuộc tính và thuộc tính sẽ hiển thị trong phần tử kết quả.

Mặc dù các thuộc tính trực tiếp trên đối tượng của chúng tôi, các thuộc tính nằm trong một đối tượng lồng nhau tương ứng với khóa

let utils = {};

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Cũng lưu ý rằng các thuộc tính sử dụng Camelcase [

let utils = {};

2] thay vì cú pháp Dash [

4]. Tôi sẽ giải thích tại sao sớm.

Cách tiếp cận 3: Tạo đối tượng và sau đó gọi phương thức

Để giúp chúng tôi phân biệt đối tượng chúng tôi truyền vào phương thức, đây là logic của chúng tôi trông như thế nào nếu chúng tôi khởi tạo đối tượng trước thời hạn.

Trong cả hai cách tiếp cận liên quan đến

let utils = {};

0, có ít sự lặp lại hơn so với cách tiếp cận 1.

Trong phần tiếp theo của chúng tôi, chúng tôi sẽ mã hóa

let utils = {};

0 và phương thức

9 của nó. Bạn có thể sử dụng thư mục cục bộ với các tệp HTML và JavaScript hoặc hộp cát mã hóa như JSFiddle hoặc CodePen.

Mã khởi đầu

Trong HTML của chúng tôi, hãy để tạo ra một yếu tố duy nhất mà chúng ta có thể nối lại mọi thứ.

Với JavaScript, hãy để tạo ra một đối tượng trống.

let utils = {};

Bây giờ, hãy để tạo ra một trình bao bọc ban đầu sẽ cung cấp cho đối tượng

let utils = {};

7 của chúng tôi phương thức chúng tôi tạo. Sau hướng dẫn này, bạn có thể viết các phương pháp khác bên trong trình bao bọc này.

[function[context] {  // methods go here}][utils];

Tạo phần tử HTML

Hãy bắt đầu bằng cách viết một bộ xương cho phương pháp

9. Tất cả những gì nó làm ngay bây giờ là lấy một đối tượng [

let utils = {};

9] làm tham số và trả về phần tử HTML DOM.

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

Nó trông gọn gàng, nhưng cho đến nay, nó vô dụng!

Đặt loại phần tử

Để tạo yếu tố của chúng tôi, chúng tôi sẽ sử dụng

[function[context] {  // methods go here}][utils];

0. Vì thuộc tính đối tượng

[function[context] {  // methods go here}][utils];

1 là bắt buộc, chúng tôi đặt mặc định nếu nó không có trong đối tượng.

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

Tôi đang sử dụng

[function[context] {  // methods go here}][utils];

2 làm mặc định, nhưng nó có thể là bất cứ điều gì phù hợp với nhu cầu của bạn.

Thêm thuộc tính và thuộc tính

Bây giờ, hãy để thêm một cách để thêm thuộc tính và thuộc tính. Trong JavaScript, các thuộc tính như

1 và

2 có thể được thêm trực tiếp.

el.className = 'myClass';
el.id = 'myClass-2';

Ngược lại, các thuộc tính phải được thêm vào thông qua

el.setAttribute['data-user','Nevin'];

Thêm thuộc tính

Trước tiên, hãy viết logic logic đặt các thuộc tính phần tử dựa trên các thuộc tính trong đối tượng truyền qua [

let utils = {};

9]. Để làm như vậy, chúng ta có thể nhận được một mảng các phím đối tượng bằng phương pháp

[function[context] {  // methods go here}][utils];

7 và lặp qua chúng bằng cách sử dụng vòng lặp

[function[context] {  // methods go here}][utils];

let el = document.createElement[type];for [const key of [Object.keys[o]]] {}

Có hai chìa khóa chúng tôi sẽ không muốn giải quyết ở đây:

[function[context] {  // methods go here}][utils];

1 và

let utils = {};

1. Vì vậy, hãy để thêm logic để loại trừ những điều đó.

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Bây giờ, hãy để thêm một dòng cung cấp cho phần tử của chúng tôi là cặp giá trị khóa hiện tại của đối tượng.

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Vì vậy, bạn có thể kiểm tra công việc của bạn, đây là JavaScript của chúng tôi cho đến nay.

Thêm các thuộc tính

Trước khi chúng tôi thêm các thuộc tính, trước tiên, hãy kiểm tra xem thuộc tính

let utils = {};

1 có tồn tại hay không. Chúng tôi sẽ thêm nó ngay trước

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Bây giờ, hãy để quét qua các khóa thuộc tính. Thay vì sử dụng

[function[context] {  // methods go here}][utils];

7 trên

let utils = {};

9, chúng tôi đang khoan sâu hơn một cấp và sử dụng nó trên

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Một cái gì đó cần chú ý: Tôi đang sử dụng

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

6 chứ không phải

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

7 ở đây. Bây giờ tôi tự hỏi tại sao điều đó có thể là…

Tình huống khó xử

Một cảnh báo là trong HTML, các thuộc tính dữ liệu thường xảy ra dưới dạng cú pháp Dash:

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Vì dấu gạch ngang trong các khóa JavaScript sẽ ném lỗi

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

8, các trích dẫn sẽ được yêu cầu để đặt các tên thuộc tính này mà không có lỗi trong

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Bây giờ tôi không phải là một fan hâm mộ của những trích dẫn đó. Hãy nhớ rằng trong các phương pháp tiếp cận 2 và 3, cho thấy cách

9 nên hoạt động, tôi đã sử dụng Camelcase [

let utils = {};

2] thay vì cú pháp Dash [

4].

Vì vậy, chúng tôi có thể có sự sang trọng của việc viết Camelcase trong các cuộc gọi phương thức của chúng tôi, hãy để thêm logic thay đổi Camelcase trong đối tượng thành cú pháp Dash cho phần tử. Đầu tiên, hãy để kiểm tra bất kỳ chữ cái đầu tư nào bằng cách sử dụng toán tử logic không [

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

3].

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Nếu

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

4 khác với

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

5, điều đó có nghĩa là chúng tôi có ít nhất một chữ cái viết hoa. Hãy để xử lý thủ đô với một lớp lót bên dưới.

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Dưới đây là một bản tóm tắt nhanh về cách một dòng mã này hoạt động:

Chúng tôi gọi phương thức

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

6 trên

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

4 và sử dụng biểu thức thông thường

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

8 để tìm kiếm tất cả các trường hợp của các chữ in hoa.

Nếu chúng tôi tìm thấy một chữ cái viết hoa, chúng tôi gán nó cho biến

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

9 trong một cuộc gọi lại.

Chúng tôi sử dụng
```
el.className = 'myClass';
el.id = 'myClass-2';
```
0 để chuyển đổi chữ cái vốn thành dấu gạch ngang [
```
el.className = 'myClass';
el.id = 'myClass-2';
```
1] theo sau là trường hợp thấp hơn của nó.

Ví dụ:

let utils = {};

2 được thay đổi thành

4 vì

el.className = 'myClass';
el.id = 'myClass-2';

4 được thay thế bằng

el.className = 'myClass';
el.id = 'myClass-2';

Ngoài ra: Để biết thêm chi tiết về cách thức hoạt động logic chính xác này, hãy xem bài viết của tôi về cách nó thay đổi Camelcase thành cú pháp Dash.

Sau khi kiểm tra Camelcase và hành động nếu cần, sau đó chúng tôi thêm cặp giá trị thuộc tính vào phần tử với cuộc gọi

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Đây là tất cả các logic thuộc tính cùng nhau:

Logic thuộc tính

Harking trở lại với một cái gì đó để chú ý đến từ trước đó: tiềm năng cần phải thay đổi cú pháp

let utils = {};[function[context] {        context.createEl = function[o] {        let type = o.type || 'div';        let el = document.createElement[type];        return el;          
    };}][utils];

4 thành Dash là lý do tại sao chúng tôi sử dụng

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

6 chứ không phải

let utils = {};[function[context] {      context.createEl = function[o] {      let el = null;      // additional code will go here.      return el;          
   };}][utils];

7 để khởi tạo nó vì chúng tôi có thể thay đổi khóa sau khi nó được tạo.

Kết thúc dòng

Hoan hô! Bây giờ chúng ta có thể phần tử của chúng ta với các thuộc tính và thuộc tính của nó. Dưới đây là phương pháp

9 đầy đủ.

Thử nghiệm

Dưới đây là một bản demo rất cơ bản để bạn có thể thấy rằng phương pháp hoạt động như dự định. Khi bạn nhấp vào tên của tôi, màu của phông chữ sẽ thay đổi. Điều này là do một thuộc tính

6 đã được thêm vào với giá trị

el.setAttribute['data-user','Nevin'];

2, một hàm bổ sung mà tôi đưa vào đây để chứng minh rằng thuộc tính đã được thêm vào.

Ngoài ra, nếu bạn nghiên cứu các CSS, bạn cũng có thể thấy rằng hai thuộc tính

el.setAttribute['data-user','Nevin'];

3 khác và lớp phần tử đang được thêm vào như các kiểu CSS tương ứng hiển thị.

Trong trường hợp bạn tò mò, hàm ____82 tôi đã sử dụng bên dưới.

attrs: { 
   dataFoo:'bar',
   dataBaz:'garply,
    title:'showModal[]'
}

Rất cám ơn Chris Coyier tại CSS Tricks cho chức năng tiện dụng!

Vì vậy, với một chút nỗ lực, bạn có thể viết thư mục nhỏ của riêng mình về các phương thức tiện ích DOM sẽ loại bỏ một số sự lặp lại và làm cho việc thêm các yếu tố trong JavaScript hiệu quả hơn. Cảm ơn vì đã đọc!

Ở nơi khác

Đây là chuyến đi sâu của tôi vào logic chuyển đổi cú pháp Camelcase/Dash.

Và phương pháp

el.setAttribute['data-user','Nevin'];

5 đến từ mảnh CSS này.

Thêm nội dung tại Plainenglish.ioplainenglish.io

Làm thế nào để thêm các yếu tố mới của HTML bằng JavaScript?

Để thêm một phần tử mới vào HTML DOM, trước tiên bạn phải tạo phần tử [nút phần tử] và sau đó nối nó vào một phần tử hiện có.create the element [element node] first, and then append it to an existing element.

Làm thế nào JavaScript có thể tạo nội dung HTML động?

DHTML bao gồm JavaScript cùng với HTML và CSS để làm cho trang động.Combo này làm cho các trang web động và loại bỏ vấn đề này là tạo trang tĩnh cho mỗi người dùng.Để tích hợp JavaScript vào HTML, mô hình đối tượng tài liệu [DOM] được tạo cho tài liệu HTML.. This combo made the web pages dynamic and eliminated this problem of creating static page for each user. To integrate JavaScript into HTML, a Document Object Model[DOM] is made for the HTML document.

Làm thế nào linh hoạt thêm phần tử HTML bằng cách sử dụng jQuery?

Bạn có thể sử dụng các phương thức thao tác JQuery Dom như append [], appendto [] hoặc html [] để thêm các phần tử HTML mới như div, đoạn, tiêu đề, hình ảnh vào DOM mà không tải lại trang.use jQuery DOM manipulation methods like append[], appendTo[] or html[] to add new HTML elements like div, paragraph, headings, image into DOM without reloading the page again.

Làm thế nào để viết mã động trong HTML?

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 bên trong.Thuộc tính bên trong được đánh dấu HTML hoặc XML có trong phần tử.using the innerHTML property . The innerHTML property gets or sets the HTML or XML markup contained within the element.