Hướng dẫn how to append text in javascript - cách nối văn bản trong javascript

472

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đã sử dụng AJAX để nối dữ liệu vào phần tử

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

9, trong đó tôi điền vào

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

9 từ JavaScript. Làm thế nào tôi có thể nối dữ liệu mới vào

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

9 mà không mất dữ liệu trước đó được tìm thấy trong đó?

Hỏi ngày 15 tháng 4 năm 2011 lúc 13:54Apr 15, 2011 at 13:54

8

Thử cái này:

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

Đã trả lời ngày 15 tháng 4 năm 2011 lúc 13:55Apr 15, 2011 at 13:55

NaftalinaftaliNaftali

Phù vàng 143K39 Huy hiệu vàng240 Huy hiệu đồng39 gold badges240 silver badges300 bronze badges

13

Sử dụng Phụ lục:

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

Sử dụng bên trong: Cách tiếp cận này sẽ loại bỏ tất cả người nghe cho các yếu tố hiện có như được đề cập bởi @biaib. Vì vậy, hãy thận trọng nếu bạn dự định sử dụng phiên bản này.
This approach will remove all the listeners to the existing elements as mentioned by @BiAiB. So use caution if you are planning to use this version.

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

Đã trả lời ngày 15 tháng 4 năm 2011 lúc 13:55Apr 15, 2011 at 13:55

NaftalinaftaliChandu

Phù vàng 143K39 Huy hiệu vàng240 Huy hiệu đồng19 gold badges132 silver badges132 bronze badges

6

Sử dụng Phụ lục:

theDiv.innerHTML += 'content';

Sử dụng bên trong: Cách tiếp cận này sẽ loại bỏ tất cả người nghe cho các yếu tố hiện có như được đề cập bởi @biaib. Vì vậy, hãy thận trọng nếu bạn dự định sử dụng phiên bản này.

theDiv.innerHTML = theDiv.innerHTML + 'content';

ChanduchanduAll references and listeners to elements inside it will be lost.

79,7K19 Huy hiệu vàng132 Huy hiệu bạc132 Huy hiệu đồng

var newNode = document.createElement('div');
newNode.innerHTML = data;
theDiv.appendChild(newNode);

Cẩn thận với

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

2, bạn sắp xếp một cái gì đó khi bạn sử dụng nó:

Tương đương với:21 gold badges71 silver badges91 bronze badges

Sẽ phá hủy tất cả các nút bên trong

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

3 của bạn và tạo lại các nút mới. Tất cả các tài liệu tham khảo và người nghe các yếu tố bên trong nó sẽ bị mất.Apr 15, 2011 at 14:06

Ví dụ, nếu bạn cần giữ chúng (khi bạn đã đính kèm một trình xử lý nhấp chuột), bạn phải nối thêm các nội dung mới với các chức năng DOM (phụ lục, chèn sau, insertbefore):BiAiB

vịt Donald7 gold badges40 silver badges59 bronze badges

5

7.90021 Huy hiệu vàng71 Huy hiệu bạc91 Huy hiệu Đồngfast and don't want to lose references and listeners use: .insertAdjacentHTML();

Đã trả lời ngày 15 tháng 4 năm 2011 lúc 14:06does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation."

BIAIBBIAIB

Huy hiệu vàng 12K740 Huy hiệu bạc59 Huy hiệu đồng

// 
one
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '
two
');

// At this point, the new structure is:
// 
one
two

Nếu bạn muốn làm điều đó nhanh chóng và không muốn mất tài liệu tham khảo và người nghe sử dụng: .InsertAdjacenthtml ();

"Nó không tái sử dụng phần tử mà nó đang được sử dụng và do đó nó không làm hỏng các phần tử hiện có bên trong phần tử. Điều này, và tránh bước thêm của tuần tự hóa làm cho nó nhanh hơn nhiều so với thao tác bên trong trực tiếp."1 gold badge15 silver badges30 bronze badges

Được hỗ trợ trên tất cả các trình duyệt chính (IE6+, FF8+, tất cả các bản khác và thiết bị di động): http://caniuse.com/#feat=insertadjacenthtmlOct 23, 2015 at 22:02

Ví dụ từ https://developer.mozilla.org/en-us/docs/web/api/element/insertadjacenthtmlMilan Rakos

Aaron17 silver badges23 bronze badges

5

1.3601 Huy hiệu vàng15 Huy hiệu bạc 30 Huy hiệu Đồng

http://api.jquery.com/append/

Đã trả lời ngày 23 tháng 10 năm 2015 lúc 22:02

Milan Rakosmilan Rakos18 gold badges80 silver badges107 bronze badges

1.63517 Huy hiệu bạc23 Huy hiệu đồngApr 15, 2011 at 14:05

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

4 và nó sẽ giữ nội dung hiện có.

var div = document.getElementById("divID");
div.textContent += data + " ";

Cthon

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

11K18 Huy hiệu vàng80 Huy hiệu bạc107 Huy hiệu đồng

Đã trả lời ngày 15 tháng 4 năm 2011 lúc 14:05

Giải pháp IE9+ (Vista+), mà không tạo các nút văn bản mới:

Tuy nhiên, điều này không hoàn toàn thực hiện thủ thuật cho tôi vì tôi cần một dòng mới sau mỗi tin nhắn, vì vậy div của tôi đã biến thành một UL theo kiểu với mã này:Dec 31, 2015 at 21:40

Từ https://developer.mozilla.org/en-us/docs/web/api/node/textcontent:LGT

Sự khác biệt từ InsideHtml1 gold badge20 silver badges20 bronze badges

InnerHTML trả về HTML như tên của nó chỉ ra. Rất thường xuyên, để truy xuất hoặc viết văn bản trong một yếu tố, mọi người sử dụng bên trong. TextContent nên được sử dụng thay thế. Bởi vì văn bản không được phân tích cú pháp là HTML, nên nó có khả năng có hiệu suất tốt hơn. Hơn nữa, điều này tránh được một vector tấn công XSS.

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

Đã trả lời ngày 31 tháng 12 năm 2015 lúc 21:40

LGTLGT64 gold badges36 silver badges39 bronze badges

4,8991 Huy hiệu vàng20 Huy hiệu bạc20 Huy hiệu đồng 20Jun 10, 2014 at 4:46

Ngay cả điều này sẽ hoạt động:Macfer Ann

Slavoo1 silver badge9 bronze badges

5.58864 Huy hiệu vàng36 Huy hiệu bạc39 Huy hiệu Đồng

Đã trả lời ngày 10 tháng 6 năm 2014 lúc 4:46
or you can user online link:

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

0

Macfer Annmacfer Ann

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

1

1531 Huy hiệu bạc9 Huy hiệu đồngJul 21, 2015 at 5:23

Bạn có thể sử dụng jQuery. Mà làm cho nó rất đơn giản.Vishnu Mishra

Chỉ cần tải xuống tệp jQuery Thêm jQuery vào HTML của bạn hoặc bạn có thể người dùng liên kết trực tuyến:2 gold badges24 silver badges36 bronze badges

và thử điều này:

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

2

Đã trả lời ngày 21 tháng 7 năm 2015 lúc 5:23May 29, 2020 at 16:20

Vishnu Mishravishnu MishraNick

3,4742 huy hiệu vàng24 Huy hiệu bạc36 Huy hiệu đồng2 gold badges11 silver badges24 bronze badges

Phương pháp sau đây ít chung hơn so với các phương pháp khác, tuy nhiên, thật tuyệt vời khi bạn chắc chắn rằng nút con cuối cùng của div đã là một nút văn bản. Bằng cách này, bạn sẽ không tạo một nút văn bản mới bằng cách sử dụng

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

5 MDN tham chiếu appendData

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

3

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

4

Đã trả lời ngày 29 tháng 5 năm 2020 lúc 16:20

• Biệt danh
• 1.2792 huy hiệu vàng11 Huy hiệu bạc24 Huy hiệu đồng
• Một tùy chọn mà tôi nghĩ là tốt hơn bất kỳ trong số đó được đề cập cho đến nay là

  var theDiv = document.getElementById("");
  theDiv.innerHTML += ""; 
  

  6.

Ưu điểm cho phương pháp này bao gồm:Aug 11 at 3:05

Không sửa đổi các nút hiện có trong DOM; Không tham nhũng người nghe sự kiện

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

5

Chèn văn bản, không phải HTML (tốt nhất chỉ sử dụng

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

7 khi cố tình chèn HTML - sử dụng nó không cần thiết là ít phù hợp về mặt ngữ nghĩa và có thể làm tăng nguy cơ XSS)

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

6

Linh hoạt; Đối số đầu tiên cho

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

8 có thể là

var theDiv = document.getElementById("");
theDiv.innerHTML += ""; 

9,

theDiv.innerHTML += 'content';

0,

theDiv.innerHTML += 'content';

1,

theDiv.innerHTML += 'content';

2, tùy thuộc vào nơi bạn muốn văn bản được chèn

Đã trả lời ngày 11 tháng 8 lúc 3:05Feb 10, 2017 at 4:01

Kịch bản JavaDeepu Sahni

jQuery2 silver badges9 bronze badges

3

Tại sao không chỉ sử dụng setAttribution?

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

7

Sau đó, bạn có thể nhận được dữ liệu này bằng cách:

var theDiv = document.getElementById("");
var content = document.createTextNode("");
theDiv.appendChild(content);

8

Đã trả lời ngày 18 tháng 10 năm 2016 lúc 12:29Oct 18, 2016 at 12:29

ThatOneguythatoneguythatOneGuy

9,5396 Huy hiệu vàng44 Huy hiệu bạc86 Huy hiệu đồng6 gold badges44 silver badges86 bronze badges

1

Làm thế nào để bạn nối các mục trong JavaScript?

Có phương pháp phụ trong JavaScript không?

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

Tại sao chúng ta sử dụng Phụ lục phụ lục trong JavaScript?