Tạo phần tử javascript với nội dung

Bạn có thể sử dụng mã JavaScript sau để chèn một đoạn mới trước đoạn đã có trong div

const myDiv = document.querySelector('div');
const firstParagraph = document.querySelector('p');

myDiv.insertBefore(newParagraph, firstParagraph);

Thử nghiệm

Dự phòng nhúng CodePen

bài tập

Tạo lại mã JS từ phần Demo trong tệp JS của bạn. Sau đó thử tùy chỉnh văn bản bên trong phần tử

Tham số duy nhất chúng ta truyền cho phương thức

const el = document.createElement('div');

2 là loại phần tử sẽ được tạo (trong ví dụ là ____1_______3)

Phương thức

const el = document.createElement('div');

4 trả về phần tử mới được tạo

Chúng tôi đã sử dụng classList. phương thức thêm để thêm hai lớp vào phần tử

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

Phương thức lấy một hoặc nhiều tên lớp làm tham số và thêm chúng vào danh sách lớp của phần tử

Nếu một lớp đã có sẵn trên phần tử, phương thức

const el = document.createElement('div');

5 sẽ bỏ qua lớp đó

Bạn có thể sử dụng thuộc tính textContent để đặt nội dung văn bản của phần tử

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

el.textContent = 'Hello world';

Thuộc tính innerHTML có thể được sử dụng để đặt đánh dấu HTML bên trong của phần tử

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

el.innerHTML = `One, two, three`;

Bạn không nên sử dụng thuộc tính

const el = document.createElement('div');

6 với dữ liệu do người dùng cung cấp mà không thoát nó. Điều này sẽ khiến ứng dụng của bạn dễ bị tấn công bằng kịch bản chéo trang

Cuối cùng, sử dụng phương thức appendChild để thêm phần tử vào trang

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

el.textContent = 'Hello world';

const box = document.getElementById('box');
box.appendChild(el);

Phương thức thêm một nút vào cuối danh sách con của phần tử mà nó được gọi

Nếu tôi tải trang từ ví dụ, tôi có thể thấy rằng các lớp đã được áp dụng thành công

Tạo một phần tử với các lớp bằng thuộc tính className

Bạn cũng có thể sử dụng thuộc tính

const el = document.createElement('div');

7 để thiết lập các lớp của phần tử sau khi bạn tạo nó

Dòng

const el = document.createElement('div');

8 đặt trực tiếp các lớp

const el = document.createElement('div');

9 và

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

0 trên phần tử bằng cách cập nhật thuộc tính

const el = document.createElement('div');

7 của nó

Cách tiếp cận này không rõ ràng như phương thức

const el = document.createElement('div');

0 vì bạn có thể thêm cùng một lớp vào phần tử nhiều lần

Khi bạn đặt thuộc tính

const el = document.createElement('div');

7 trên phần tử, tất cả các lớp hiện có sẽ bị xóa và thay thế bằng các lớp được cung cấp

Việc nối thêm các lớp cũng rất phức tạp vì bạn phải lưu ý để lại một khoảng trống giữa các tên lớp

const el = document.createElement('div');

el.className = 'bg-yellow text-lg';

el.className += ' italic';

Bạn cũng có thể thấy phương pháp

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

4 được sử dụng theo cách tương tự

Phần tử. phương thức setAttribute đặt giá trị của một thuộc tính trên phần tử đã chỉ định

Nếu thuộc tính đã tồn tại, giá trị của nó sẽ được cập nhật, nếu không, một thuộc tính mới với giá trị đã chỉ định sẽ được thêm vào

Tạo một phần tử với các lớp bằng cách sử dụng insertAdjacentHTML

Bạn cũng có thể sử dụng phương thức

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

5 để tạo một phần tử với các lớp

  
    bobbyhadz.com
    

    
  

  
    

    
  

Và đây là mã JavaScript liên quan

Lưu ý rằng chúng tôi đã sử dụng backticks khi khai báo biến

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

6 chứ không phải dấu nháy đơn

Chúng tôi đã đặt thẻ

const el = document.createElement('div');

3 ngay trước thẻ đóng cửa

const el = document.createElement('div');

3 có

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

9 của

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

el.textContent = 'Hello world';

0

Phương thức insertAdjacentHTML() nhận 2 tham số sau

• const el = document.createElement('div');
  
  el.classList.add('bg-yellow', 'text-lg');
  
  el.textContent = 'Hello world';
  

  1 - vị trí liên quan đến phần tử mà HTML sẽ được chèn vào. Có thể là một trong những điều sau đây

  • const el = document.createElement('div');
    
    el.classList.add('bg-yellow', 'text-lg');
    
    el.textContent = 'Hello world';
    

    2 - trước chính phần tử đó

  • const el = document.createElement('div');
    
    el.classList.add('bg-yellow', 'text-lg');
    
    el.textContent = 'Hello world';
    

    3 - ngay bên trong phần tử, trước phần tử con đầu tiên của nó

  • const el = document.createElement('div');
    
    el.classList.add('bg-yellow', 'text-lg');
    
    el.textContent = 'Hello world';
    

    4 - ngay bên trong phần tử, sau phần tử con cuối cùng của nó

  • const el = document.createElement('div');
    
    el.classList.add('bg-yellow', 'text-lg');
    
    el.textContent = 'Hello world';
    

    5 - sau chính phần tử đó

• const el = document.createElement('div');
  
  el.classList.add('bg-yellow', 'text-lg');
  
  el.textContent = 'Hello world';
  

  6 - chuỗi được phân tích dưới dạng HTML và được chèn vào DOM

Lưu ý rằng không nên sử dụng phương pháp này để nối thêm HTML từ đầu vào do người dùng tạo mà không thoát nó

Tạo phần tử có thuộc tính ID trong JavaScript

Để tạo một phần tử có thuộc tính id

1. Sử dụng phương thức document.createElement() để tạo phần tử
2. Sử dụng phương thức

   const el = document.createElement('div');
   
   el.classList.add('bg-yellow', 'text-lg');
   
   el.textContent = 'Hello world';
   

   8 để đặt thuộc tính

   const el = document.createElement('div');
   
   el.classList.add('bg-yellow', 'text-lg');
   

   9 trên phần tử
3. Thêm phần tử vào trang bằng phương pháp

   const el = document.createElement('div');
   

   1

Đây là HTML cho ví dụ

  
    bobbyhadz.com
    
  

  

  
    

    
  

Và đây là mã JavaScript liên quan

Chúng tôi đã sử dụng tài liệu. phương thức createElement để tạo phần tử

Tham số duy nhất chúng ta truyền cho phương thức là loại phần tử sẽ được tạo (trong ví dụ là ______1_______3)

Phương thức

const el = document.createElement('div');

2 trả về phần tử mới được tạo

Chúng tôi đã sử dụng phương thức setAttribute để đặt thuộc tính

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

9 trên phần tử

Phương thức

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

4 nhận 2 tham số

1. const el = document.createElement('div');
   
   el.classList.add('bg-yellow', 'text-lg');
   
   el.innerHTML = `One, two, three`;
   

   5 - tên của thuộc tính có giá trị được đặt

2. const el = document.createElement('div');
   
   el.classList.add('bg-yellow', 'text-lg');
   
   el.innerHTML = `One, two, three`;
   

   6 - giá trị để gán cho thuộc tính

Trong ví dụ này, chúng tôi đặt giá trị của thuộc tính

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

9 của phần tử thành

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

el.innerHTML = `One, two, three`;

8

Nếu thuộc tính đã tồn tại, giá trị sẽ được cập nhật, nếu không, một thuộc tính mới được thêm vào với tên và giá trị đã chỉ định

Bạn có thể sử dụng thuộc tính textContent để đặt nội dung văn bản của phần tử hoặc thuộc tính innerHTML để đặt đánh dấu HTML bên trong của phần tử

Bạn không nên sử dụng thuộc tính

const el = document.createElement('div');

6 với dữ liệu do người dùng cung cấp mà không thoát nó. Điều này sẽ khiến ứng dụng của bạn dễ bị tấn công bằng kịch bản chéo trang

Bạn có thể sử dụng phương thức appendChild để thêm phần tử vào trang

Phương thức thêm một nút vào cuối danh sách con của phần tử mà nó được gọi

Nếu tôi tải trang từ ví dụ, tôi có thể thấy rằng thuộc tính

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

9 đã được đặt trên phần tử mới được tạo

Và trang hiển thị rằng các kiểu từ thẻ

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

el.textContent = 'Hello world';

const box = document.getElementById('box');
box.appendChild(el);

1 nằm trong phạm vi của

const el = document.createElement('div');

el.classList.add('bg-yellow', 'text-lg');

9 đã chỉ định đã được áp dụng

Làm cách nào để tạo phần tử mới trong JavaScript?

Làm cách nào để tạo phần tử bằng chuỗi trong JavaScript?

Làm cách nào để tạo phần tử động trong JavaScript?

Làm cách nào để thêm nội dung HTML vào div bằng JavaScript?