Saya perlu untuk mengatur teks dalam elemen DIV secara dinamis. Apa yang terbaik, browser aman pendekatan? Saya telah prototypejs dan scriptaculous tersedia.
<div id="panel">
<div id="field_name">TEXT GOES HERE</div>
</div>
Berikut ini's apa fungsi akan terlihat seperti:
function showPanel(fieldName) {
var fieldNameElement = document.getElementById('field_name');
//Make replacement here
}
Diperbarui untuk semua orang yang membaca ini pada tahun 2013 dan kemudian:
Jawaban ini telah banyak SEO, tapi semua jawaban yang sangat out of date dan tergantung pada perpustakaan untuk melakukan hal-hal yang semua browser yang ada saat ini tidak keluar dari kotak.
fieldNameElement.textContent = "New text";
fungsi showPanel(fieldName) {
var fieldNameElement = dokumen.getElementById("field_name");
sementara(fieldNameElement.childNodes.panjang >= 1) {
fieldNameElement.removeChild(fieldNameElement.firstChild);
}
fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}
Keuntungan melakukan cara ini:
Jika saya akan menggunakan sebuah library javascript, I'a menggunakan jQuery, dan melakukan ini:
$("div#field_name").teks(fieldName);
Perhatikan bahwa @AnthonyWJones' komentar adalah benar: "field_name" bukan't sangat deskriptif id atau nama variabel.
Saya akan menggunakan Prototipe's update
metode yang mendukung teks biasa, potongan HTML atau JavaScript object yang mendefinisikan toString
metode.
$("field_name").update("New text");
$('field_name').innerHTML = 'Your text.';
Salah satu fitur bagus dari Prototipe adalah bahwa $('field_name')
melakukan hal yang sama sebagai dokumen.getElementById('field_name')
. Menggunakannya! :-)
John Topley's jawaban dengan menggunakan Prototipe's update
fungsi lain adalah solusi yang baik.
Jawaban cepat adalah dengan menggunakan innerHTML (atau prototipe's metode update yang cukup banyak hal yang sama). Masalah dengan innerHTML adalah yang anda butuhkan untuk melarikan diri dari konten yang diberikan. Tergantung pada target anda, anda akan perlu untuk melakukan itu dengan kode lain ATAU
di IE:-
document.getElementById("field_name").innerText = newText;
di FF:-
document.getElementById("field_name").textContent = newText;
(Sebenarnya FF berikut hadir dalam oleh kode)
HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })
HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })
Sekarang saya hanya dapat menggunakan innerText jika anda membutuhkan seluas mungkin browser mendukung maka ini bukan solusi yang lengkap tetapi tidak menggunakan innerHTML di baku.
Jika anda benar-benar ingin kita melanjutkan di mana anda tinggalkan, anda bisa melakukan:
if (fieldNameElement)
fieldNameElement.innerHTML = 'some HTML';
nodeValue juga standar DOM properti yang dapat anda gunakan:
function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);
if(fieldNameElement.firstChild)
fieldNameElement.firstChild.nodeValue = "New Text";
}
Jika anda're cenderung untuk mulai menggunakan banyak JavaScript pada situs anda, jQuery membuat bermain dengan DOM yang sangat sederhana.
http://docs.jquery.com/Manipulation
Membuat hal sederhana seperti: $("#bidang-nama").teks("Beberapa teks baru.");
Gunakan innerText jika anda dapat't mengasumsikan struktur
function showPanel(fieldName) {
var fieldNameElement = document.getElementById(field_name);
fieldNameElement.removeChild(fieldNameElement.firstChild);
var newText = document.createTextNode("New Text");
fieldNameElement.appendChild(newText);
}