Hướng dẫn how to set text to div in javascript - cách đặt văn bản thành div trong javascript

Bạn có thể sử dụng chức năng trợ giúp sau:

function content[divSelector, value] {
    document.querySelector[divSelector].innerHTML = value;
}

content['#content',"whatever"];

Trong đó #content phải là bộ chọn CSS hợp lệ

Đây là ví dụ làm việc.

Ngoài ra - hôm nay [2018.07.01] Tôi đã thực hiện so sánh tốc độ cho các giải pháp JQuery và Pure JS [MacOS High Sierra 10.13.3 trên Chrome 67.0.3396.99 [64 -bit], Safari 11.0.3 [13604.5.6], Firefox 59.0.0.2 [64 bit]]:

document.getElementById["content"].innerHTML = "whatever"; // pure JS
$['#content'].html['whatever'];                            // jQuery

Giải pháp jQuery chậm hơn giải pháp JS tinh khiết: 69% trên Firefox, 61% trên Safari, 56% trên Chrome. Trình duyệt nhanh nhất cho Pure JS là Firefox với 560m hoạt động mỗi giây, lần thứ hai là Safari 426m và chậm nhất là Chrome 122m.

Vì vậy, những người chiến thắng là JS và Firefox thuần túy [nhanh hơn 3 lần so với Chrome!] [3x faster than chrome!]

Bạn có thể kiểm tra nó trong máy của bạn: //jsperf.com/js-jquery-html-content-change

Thay đổi văn bản của phần tử div bằng JavaScript #

Sử dụng thuộc tính textContent để thay đổi văn bản của phần tử div, ví dụ:

document.getElementById["content"].innerHTML = "whatever"; // pure JS
$['#content'].html['whatever'];                            // jQuery

Đây là HTML cho các ví dụ trong bài viết này.

Copied!
DOCTYPE html>

  
    
  

  
    Initial Text

    
  

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

Copied!
const div = document.getElementById['container'];

// ✅ Change [replace] the text of the element
div.textContent = 'Replacement text';

// ✅ Change [replace] the content with HTML
div.innerHTML = `Replacement HTML`;

// ✅ Append / Prepend text to the element
div.insertAdjacentText['beforeend', ' appended text'];

// ✅ Append / Prepend HTML to the element
div.insertAdjacentHTML[
  'beforeend',
  ` appended HTML`,
];

Chúng tôi đã sử dụng thuộc tính TextContent trên div để thay đổi nội dung văn bản của nó.

Thuộc tính textContent cũng có thể được sử dụng để đọc nội dung văn bản của một phần tử và hậu duệ của nó.

Cài đặt textContent trên một phần tử, loại bỏ tất cả trẻ em của phần tử và thay thế chúng bằng một nút văn bản duy nhất bằng chuỗi được cung cấp.

Nếu bạn cần thay thế hoàn toàn nội dung HTML của div, hãy sử dụng thuộc tính bên trong.

Copied!
const div = document.getElementById['container'];

// ✅ Change [replace] the text with HTML
div.innerHTML = `Replacement HTML`;

Thuộc tính

document.getElementById["content"].innerHTML = "whatever"; // pure JS
$['#content'].html['whatever'];                            // jQuery

Bằng cách đặt thuộc tính trên phần tử, bạn thay thế hiệu quả HTML có chứa trước đó trong div.

Bạn không nên sử dụng dữ liệu do người dùng tạo mà không thoát khỏi nó khi đặt HTML của một phần tử vì nó sẽ khiến ứng dụng của bạn dễ bị tấn công XSS.

Nếu bạn cần nối / chuẩn bị cho văn bản vào nội dung hiện có của phần tử div, hãy sử dụng phương thức

Copied!
DOCTYPE html>

  
    
  

  
    Initial Text

    
  

Copied!
const div = document.getElementById['container'];

// ✅ Append / Prepend text to the element
div.insertAdjacentText['beforeend', ' appended text'];

Phương thức InsertAdjacentText lấy 2 tham số sau:

1. Copied!
   DOCTYPE html>
   
     
       
     
   
     
       Initial Text
   
       
     
   
   

   1 - Vị trí liên quan đến phần tử của nơi văn bản nên được chèn. Có thể là một trong những điều 4 sau đây:

• Copied!
  DOCTYPE html>
  
    
      
    
  
    
      Initial Text
  
      
    
  
  

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

• Copied!
  DOCTYPE html>
  
    
      
    
  
    
      Initial Text
  
      
    
  
  

  3 - Ngay bên trong phần tử, trước đứa con đầu lòng của nó.

• Copied!
  DOCTYPE html>
  
    
      
    
  
    
      Initial Text
  
      
    
  
  

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

• Copied!
  DOCTYPE html>
  
    
      
    
  
    
      Initial Text
  
      
    
  
  

  5 - sau chính phần tử.

1. Copied!
   
     
   
   DOCTYPE html>
   
     
       
     
   
     
       Initial Text
   
       
     
   
   

   6 - Chuỗi mà từ đó tạo một nút văn bản mới để chèn tại vị trí đã cho.

Chúng tôi đã chèn văn bản ngay bên trong phần tử div, trước đứa con cuối cùng của nó, nhưng bạn có thể thay đổi giá trị của tham số

Copied!
DOCTYPE html>

  
    
  

  
    Initial Text

    
  

Nếu bạn cần chèn HTML vào div, hãy sử dụng phương thức InsertAdjacenthTML.

Copied!
const div = document.getElementById['container'];

// ✅ Append / Prepend HTML to the element
div.insertAdjacentHTML[
  'beforeend',
  ` appended HTML`,
];

Tham số đầu tiên Phương thức

Copied!
const div = document.getElementById['container'];

// ✅ Change [replace] the text of the element
div.textContent = 'Replacement text';

// ✅ Change [replace] the content with HTML
div.innerHTML = `Replacement HTML`;

// ✅ Append / Prepend text to the element
div.insertAdjacentText['beforeend', ' appended text'];

// ✅ Append / Prepend HTML to the element
div.insertAdjacentHTML[
  'beforeend',
  ` appended HTML`,
];

Copied!
DOCTYPE html>

  
    
  

  
    Initial Text

    
  

Tham số thứ hai là chuỗi HTML chứa nội dung bạn muốn chèn.

Lưu ý rằng phương pháp này không nên được sử dụng với dữ liệu được cung cấp mà không có nó bị thoát ra, vì nó sẽ khiến bạn mở ra các cuộc tấn công kịch bản chéo trang.

Làm cách nào để đặt văn bản vào một div?

Tôi có thể đặt văn bản trực tiếp vào một div không?

Tôi có thể nối vào một div javascript không?

Làm thế nào để bạn tạo một div trong javascript?