div 요소 내부의 텍스트를 어떻게 교체합니까?

Question

DIV 요소 내에서 텍스트를 동적으로 설정해야합니다. 가장 좋은 브라우저 안전 방식은 무엇입니까? 프로토 타입과 스크립트를 사용할 수 있습니다.

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

기능의 모습은 다음과 같습니다.

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

Answer 1

나는 프로토 타입을 사용할 것입니다 update 일반 텍스트, HTML 스 니펫 또는 toString 방법.

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

• 요소 .update 문서

Answer 2

You can simply use:

fieldNameElement.innerHTML = "My new text!";

Answer 3

Updated for everyone reading this in 2013 and later:

This answer has a lot of SEO, but all the answers are severely out of date and depend on libraries to do things that all current browsers do out of the box.

To replace text inside a div element, use Node.textContent, which is provided in all current browsers.

fieldNameElement.textContent = "New text";

Answer 4

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

The advantages of doing it this way:

1. It only uses the DOM, so the technique is portable to other languages, and doesn't rely on the non-standard innerHTML
2. fieldName might contain HTML, which could be an attempted XSS attack. If we know it's just text, we should be creating a text node, instead of having the browser parse it for HTML

If I were going to use a javascript library, I'd use jQuery, and do this:

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

Note that @AnthonyWJones' comment is correct: "field_name" isn't a particularly descriptive id or variable name.

Answer 5

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

One of the nifty features of Prototype is that $('field_name') does the same thing as document.getElementById('field_name'). Use it! :-)

John Topley's answer using Prototype's update function is another good solution.

Answer 6

The quick answer is to use innerHTML (or prototype's update method which pretty much the same thing). The problem with innerHTML is you need to escape the content being assigned. Depending on your targets you will need to do that with other code OR

in IE:-

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

in FF:-

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

(Actually of FF have the following present in by code)

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

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

Now I can just use innerText if you need widest possible browser support then this is not a complete solution but neither is using innerHTML in the raw.

Answer 7

If you really want us to just continue where you left off, you could do:

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

Answer 8

nodeValue is also a standard DOM property you can use:

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

Answer 9

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

Answer 10

If you're inclined to start using a lot of JavaScript on your site, jQuery makes playing with the DOM extremely simple.

http://docs.jquery.com/Manipulation

Makes it as simple as: $("#field-name").text("Some new text.");

Answer 11

Use innerText if you can't assume structure - Use Text#data to update existing text Performance Test

Answer 12

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

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

Answer 13

Here's an easy jQuery way:

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

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