Cách thêm văn bản trong khoảng bằng JavaScript

Điều này đặc biệt hữu ích khi lấy dữ liệu do người dùng cung cấp vì phương thức thoát khỏi các ký tự HTML và ngăn chặn các cuộc tấn công XSS

Bước cuối cùng là sử dụng Node. appendChild để nối nút văn bản vào cuối phần tử con của phần tử

Cách tiếp cận này có thể được sử dụng để nối thêm văn bản vào bất kỳ phần tử nào, chẳng hạn như. g. div, span, đoạn văn, v.v.

Ngoài ra, bạn có thể sử dụng phương thức insertAdjacentText

Nối văn bản vào một phần tử (DIV, SPAN, P) bằng cách sử dụng insertAdjacentText()

Sử dụng phương pháp insertAdjacentText() để nối thêm văn bản vào một phần tử, e. g.

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

box.insertAdjacentText('beforeend', ' new text');

Phương thức lấy một vị trí và một chuỗi làm tham số và chèn một nút văn bản mới vào vị trí được cung cấp so với phần tử mà nó được gọi trên đó

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

box.insertAdjacentText('beforeend', ' new text');

Phương thức insertAdjacentText nhận 2 tham số sau

1. const box = document.getElementById('box');
   
   box.insertAdjacentText('beforeend', ' new text');
   

   2 - vị trí liên quan đến phần tử mà văn bản sẽ được chèn vào. Có thể là một trong 4 điều sau

• const box = document.getElementById('box');
  
  box.insertAdjacentText('beforeend', ' new text');
  

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

• const box = document.getElementById('box');
  
  box.insertAdjacentText('beforeend', ' new text');
  

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

• const box = document.getElementById('box');
  
  box.insertAdjacentText('beforeend', ' new text');
  

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

• const box = document.getElementById('box');
  
  box.insertAdjacentText('beforeend', ' new text');
  

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

1. const box = document.getElementById('box');
   
   box.insertAdjacentText('beforeend', ' new text');
   

   7 - chuỗi để tạo một nút văn bản mới để chèn vào vị trí đã cho

Bạn có thể sử dụng phương pháp

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

box.insertAdjacentText('beforeend', ' new text');

Bạn chọn cách tiếp cận nào là vấn đề sở thích cá nhân. Tôi sẽ sử dụng phương pháp

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

box.insertAdjacentHTML(
  'beforeend',
  ' New html',
);

Nối HTML vào một phần tử (DIV, SPAN, P) trong JavaScript

Nếu bạn cần nối thêm

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

box.insertAdjacentHTML(
  'beforeend',
  ' New html',
);

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

box.insertAdjacentHTML(
  'beforeend',
  ' New html',
);

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

box.insertAdjacentHTML(
  'beforeend',
  ' New html',
);

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

• const box = document.getElementById('box');
  
  box.insertAdjacentText('beforeend', ' new text');
  

  2 - 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 box = document.getElementById('box');
    
    box.insertAdjacentText('beforeend', ' new text');
    

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

  • const box = document.getElementById('box');
    
    box.insertAdjacentText('beforeend', ' new text');
    

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

  • const box = document.getElementById('box');
    
    box.insertAdjacentText('beforeend', ' new text');
    

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

  • const box = document.getElementById('box');
    
    box.insertAdjacentText('beforeend', ' new text');
    

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

• const box = document.getElementById('box');
  
  box.insertAdjacentHTML(
    'beforeend',
    ' New html',
  );
  

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

Cần lưu ý rằng bạn không nên thêm HTML từ đầu vào do người dùng tạo mà không thoát nó

Trong ví dụ này, chúng tôi đã chèn văn bản ngay bên trong phần tử div, sau phần tử con cuối cùng của nó, nhưng bạn có thể thay đổi đối số đầu tiên tùy thuộc vào trường hợp sử dụng của bạn

Làm cách nào để thêm văn bản bên trong khoảng trong JavaScript?

Làm cách nào để viết span trong JavaScript?

Làm cách nào để bạn có được văn bản được viết bên trong phần tử span?

Làm cách nào để thêm văn bản khoảng cách bằng JQuery?