Bir div öğesinin içindeki metni nasıl değiştiririm?

Bir DIV öğesi içindeki metni dinamik olarak ayarlamam gerekiyor. Tarayıcı için en iyi yaklaşım hangisidir? Prototiplerim ve senaryomuz var.

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

İşlev şu şekilde görünecektir:

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

Ben updatedüz metin, bir HTML snippet'i veya bir toStringyöntemi tanımlayan herhangi bir JavaScript nesnesini destekleyen Prototype yöntemini kullanırdım.

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

• Element.update belgeleri

Sadece şunu kullanabilirsiniz:

fieldNameElement.innerHTML = "My new text!";

2013 ve sonrasında bunu okuyan herkes için güncellendi:

Bu cevabın çok fazla SEO'su var, ancak tüm cevaplar ciddi şekilde güncel değil ve mevcut tüm tarayıcıların kutudan çıkardıkları şeyleri yapmak için kütüphanelere bağlı.

Bir div öğesinin içindeki metni değiştirmek için, geçerli tüm tarayıcılarda sağlanan Node.textContent öğesini kullanın.

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

Bu şekilde yapmanın avantajları:

1. Yalnızca DOM kullanır, bu nedenle teknik diğer diller için taşınabilirdir ve standart dışı innerHTML'ye güvenmez
2. fieldName, XSS saldırısına teşebbüs olabilecek HTML içerebilir. Bunun sadece metin olduğunu biliyorsanız, tarayıcının HTML için ayrıştırmasını sağlamak yerine bir metin düğümü oluşturmalıyız

Bir javascript kitaplığı kullanacak olsaydım, jQuery kullanmak ve bunu yapmak:

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

@AnthonyWJones öğesinin yorumunun doğru olduğunu unutmayın : "field_name" özellikle açıklayıcı bir kimlik veya değişken adı değildir.

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

Prototipin şık özelliklerinden $('field_name')biri de aynı şeyi yapmasıdır document.getElementById('field_name'). Kullanın! :-)

John Topley'nin Prototip updateişlevini kullanarak verdiği cevap da iyi bir çözüm.

Hızlı cevap innerHTML'yi (veya prototipin hemen hemen aynı şey olan güncelleme yöntemini) kullanmaktır. İnnerHTML ile ilgili sorun, atanan içerikten kaçmanız gerektiğidir. Hedeflerinize bağlı olarak bunu başka bir kodla VEYA

IE'de: -

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

FF içinde: -

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

(Aslında FF aşağıdakiler kod ile mevcuttur)

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

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

Mümkün olan en geniş tarayıcı desteğine ihtiyacınız varsa, sadece innerText'i kullanabilirim, o zaman bu tam bir çözüm değildir ama raw'da innerHTML kullanmaz.

Gerçekten kaldığınız yerden devam etmemizi istiyorsanız, şunları yapabilirsiniz:

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

nodeValue ayrıca kullanabileceğiniz standart bir DOM özelliğidir:

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

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

Sitenizde çok fazla JavaScript kullanmaya başlama eğilimindeyseniz, jQuery DOM ile oynamayı son derece basit hale getirir.

http://docs.jquery.com/Manipulation

Bunu şu kadar basit hale getirir: $ ("# field-name"). Text ("Bazı yeni metinler");

Yapıyı kabul edemiyorsanız innerText kullanın - Mevcut metni güncellemek için Metin # verilerini kullanın Performans Testi

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

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

İşte kolay bir jQuery yolu:

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

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

HTML'de bunu koy

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

Javascript bunu koydu

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