Làm cách nào để thay thế văn bản bên trong phần tử div?

Tôi cần thiết lập văn bản trong phần tử DIV một cách linh hoạt. Cách tiếp cận an toàn nhất, tốt nhất cho trình duyệt là gì? Tôi có nguyên mẫu và kịch bản có sẵn.

<div id="panel">
  <div id="field_name">TEXT GOES HERE</div>
</div>

Đây là chức năng sẽ như thế nào:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}

Tôi sẽ sử dụng updatephương thức của Prototype , hỗ trợ văn bản thuần túy, đoạn mã HTML hoặc bất kỳ đối tượng JavaScript nào xác định toStringphương thức.

$("field_name").update("New text");

• Tài liệu Element.update

Bạn chỉ có thể sử dụng:

fieldNameElement.innerHTML = "My new text!";

Cập nhật cho mọi người đọc này vào năm 2013 và sau đó:

Câu trả lời này có rất nhiều SEO, nhưng tất cả các câu trả lời đã hết hạn và phụ thuộc vào các thư viện để làm những việc mà tất cả các trình duyệt hiện tại làm được.

Để thay thế văn bản bên trong một phần tử div, hãy sử dụng Node.textContent, được cung cấp trong tất cả các trình duyệt hiện tại.

fieldNameElement.textContent = "New text";

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById("field_name");
  while(fieldNameElement.childNodes.length >= 1) {
    fieldNameElement.removeChild(fieldNameElement.firstChild);
  }
  fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}

Những lợi thế của việc làm theo cách này:

1. Nó chỉ sử dụng DOM, vì vậy kỹ thuật này có thể di chuyển sang các ngôn ngữ khác và không phụ thuộc vào bên trongHTML không chuẩn
2. fieldName có thể chứa HTML, có thể là một cuộc tấn công XSS đã cố gắng. Nếu chúng ta biết đó chỉ là văn bản, chúng ta nên tạo một nút văn bản, thay vì trình duyệt phân tích nó thành HTML

Nếu tôi định sử dụng thư viện javascript, tôi sẽ sử dụng jQuery và làm điều này:

  $("div#field_name").text(fieldName);

Lưu ý rằng nhận xét của @AnthonyWJones là chính xác: "field_name" không phải là tên mô tả hoặc tên biến đặc biệt.

$('field_name').innerHTML = 'Your text.';

Một trong những tính năng tiện lợi của Prototype là $('field_name')hoạt động tương tự nhưdocument.getElementById('field_name') . Sử dụng nó! :-)

Câu trả lời của John Topley sử dụng updatechức năng của Prototype là một giải pháp tốt khác.

Câu trả lời nhanh là sử dụng InternalHTML (hoặc phương thức cập nhật của nguyên mẫu gần giống như vậy). Vấn đề với InternalHTML là bạn cần thoát khỏi nội dung được gán. Tùy thuộc vào mục tiêu của bạn, bạn sẽ cần phải làm điều đó với mã khác HOẶC

trong IE: -

document.getElementById("field_name").innerText = newText;

trong FF: -

document.getElementById("field_name").textContent = newText;

(Trên thực tế FF có mã hiện tại như sau)

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

Bây giờ tôi chỉ có thể sử dụng InternalText nếu bạn cần hỗ trợ trình duyệt rộng nhất có thể thì đây không phải là một giải pháp hoàn chỉnh nhưng cũng không sử dụng InternalHTML trong bản thô.

Nếu bạn thực sự muốn chúng tôi tiếp tục nơi bạn rời đi, bạn có thể làm:

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';

nodeValue cũng là một thuộc tính DOM tiêu chuẩn mà bạn có thể sử dụng:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}

el.innerHTML='';
el.appendChild(document.createTextNode("yo"));

Nếu bạn có xu hướng bắt đầu sử dụng nhiều JavaScript trên trang web của mình, jQuery sẽ giúp việc chơi với DOM cực kỳ đơn giản.

http://docs.jquery.com/Quản lý

Làm cho nó đơn giản như: $ ("# tên trường"). Văn bản ("Một số văn bản mới.");

Sử dụng InternalText nếu bạn không thể giả định cấu trúc - Sử dụng dữ liệu Văn bản # để cập nhật Kiểm tra hiệu suất văn bản hiện có

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}

Đây là một cách dễ dàng của jQuery :

var el = $('#yourid .yourclass');

el.html(el.html().replace(/Old Text/ig, "New Text"));

Trong HTML đặt điều này

<div id="field_name">TEXT GOES HERE</div>

Trong Javascript đặt điều này

var fieldNameElement = document.getElementById('field_name');
        if (fieldNameElement)
        {fieldNameElement.innerHTML = 'some HTML';}