Bagaimana cara mengganti teks di dalam elemen div?

Saya perlu mengatur teks dalam elemen DIV secara dinamis. Apa yang terbaik, pendekatan aman browser? Saya memiliki prototypej dan skrip tersedia.

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

Seperti apa fungsinya nanti:

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

Saya akan menggunakan updatemetode Prototipe yang mendukung teks biasa, cuplikan HTML, atau objek JavaScript apa pun yang menentukan toStringmetode.

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

• Dokumentasi Element.update

Anda cukup menggunakan:

fieldNameElement.innerHTML = "My new text!";

Diperbarui untuk semua orang yang membaca ini di 2013 dan yang lebih baru:

Jawaban ini memiliki banyak SEO, tetapi semua jawaban sangat ketinggalan zaman dan bergantung pada perpustakaan untuk melakukan hal-hal yang semua browser saat ini lakukan di luar kotak.

Untuk mengganti teks di dalam elemen div, gunakan Node.textContent, yang disediakan di semua browser saat ini.

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));
}

Keuntungan melakukannya dengan cara ini:

1. Hanya menggunakan DOM, sehingga teknik ini portabel untuk bahasa lain, dan tidak bergantung pada innerHTML non-standar
2. fieldName mungkin berisi HTML, yang bisa berupa serangan XSS yang dicoba. Jika kita tahu itu hanya teks, kita harus membuat simpul teks, alih-alih peramban menguraikannya untuk HTML

Jika saya akan menggunakan perpustakaan javascript, saya akan menggunakan jQuery, dan lakukan ini:

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

Perhatikan bahwa komentar @AnthonyWJones benar: "field_name" bukan id deskriptif atau nama variabel.

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

Salah satu fitur bagus dari Prototype adalah $('field_name')melakukan hal yang samadocument.getElementById('field_name') . Gunakan! :-)

Jawaban John Topley menggunakan updatefungsi Prototype adalah solusi bagus lainnya.

Jawaban cepatnya adalah menggunakan innerHTML (atau metode pembaruan prototipe yang hampir sama). Masalah dengan innerHTML adalah Anda harus keluar dari konten yang ditugaskan. Bergantung pada target Anda, Anda perlu melakukannya dengan kode lain ATAU

di IE: -

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

dalam FF: -

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

(Sebenarnya FF memiliki kode berikut ini)

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

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

Sekarang saya bisa menggunakan innerText jika Anda membutuhkan dukungan browser seluas mungkin maka ini bukan solusi yang lengkap tetapi tidak menggunakan innerHTML di internet.

Jika Anda benar-benar ingin kami melanjutkan di mana Anda tinggalkan, Anda bisa melakukan:

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

nodeValue juga merupakan properti DOM standar yang dapat Anda gunakan:

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

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

Jika Anda cenderung mulai menggunakan banyak JavaScript di situs Anda, jQuery membuat bermain dengan DOM menjadi sangat sederhana.

http://docs.jquery.com/Manipulation

Jadikan sesederhana: $ ("# bidang-nama"). Teks ("Beberapa teks baru.");

Gunakan innerText jika Anda tidak dapat menganggap struktur - Gunakan data Teks # untuk memperbarui Tes Kinerja teks yang ada

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

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

Ini cara jQuery yang mudah :

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

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

Dalam HTML taruh ini

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

Dalam Javascript taruh ini

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