div 요소 내부의 텍스트를 바꾸려면 어떻게합니까?

DIV 요소 내에서 텍스트를 동적으로 설정해야합니다. 가장 안전한 브라우저 접근 방식은 무엇입니까? prototypejs와 scriptaculous를 사용할 수 있습니다.

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

기능은 다음과 같습니다.

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

update일반 텍스트, HTML 스 니펫 또는 toString메소드 를 정의하는 JavaScript 오브젝트를 지원 하는 프로토 타입의 메소드를 사용합니다 .

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

• Element.update 문서

간단하게 사용할 수 있습니다 :

fieldNameElement.innerHTML = "My new text!";

2013 년 이후에이 내용을 읽는 모든 사람을 위해 업데이트되었습니다.

이 답변에는 많은 SEO가 있지만 모든 답변은 심각하게 구식이며 모든 현재 브라우저에서 즉시 사용할 수있는 작업을 수행하기 위해 라이브러리에 의존합니다.

div 요소 내부의 텍스트를 바꾸려면 모든 현재 브라우저에서 제공되는 Node.textContent를 사용하십시오.

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

이런 식으로하는 것의 장점 :

1. DOM 만 사용 하므로이 기술은 다른 언어로 이식 가능하며 비표준 innerHTML에 의존하지 않습니다.
2. fieldName은 HTML을 포함 할 수 있으며, 이는 시도 된 XSS 공격 일 수 있습니다. 텍스트라는 것을 알고 있다면 브라우저가 HTML에 대해 구문 분석하는 대신 텍스트 노드를 작성해야합니다.

자바 스크립트 라이브러리를 사용하려는 경우 jQuery를 사용하고 다음을 수행하십시오.

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

참고 것을 @AnthonyWJones '댓글이 올바른지 : "FIELD_NAME은"특히 설명 ID 또는 변수 이름이 아닙니다.

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

프로토 타입의 멋진 기능 중 하나는와 $('field_name')동일한 기능을 수행한다는 것 document.getElementById('field_name')입니다. 그걸 써! :-)

프로토 타입 update기능을 사용한 John Topley의 답변 은 또 다른 좋은 솔루션입니다.

빠른 답변은 innerHTML (또는 프로토 타입의 업데이트 방법과 거의 동일)을 사용하는 것입니다. innerHTML의 문제점은 할당 된 컨텐츠를 이스케이프해야한다는 것입니다. 대상에 따라 다른 코드로 수행해야합니다.

IE에서 :-

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

FF에서 :-

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

(실제로 FF의 코드에는 다음과 같은 내용이 있습니다)

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

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

이제 가장 광범위한 브라우저 지원이 필요한 경우 innerText를 사용할 수 있습니다.이 솔루션은 완벽한 솔루션은 아니지만 rawHTML에서 innerHTML을 사용하지 않습니다.

중단 한 곳에서 계속 진행하기를 원한다면 다음을 수행 할 수 있습니다.

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

nodeValue는 또한 사용할 수있는 표준 DOM 속성입니다.

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

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

사이트에서 많은 JavaScript를 사용하려는 경향이있는 경우 jQuery를 사용하면 DOM을 매우 간단하게 사용할 수 있습니다.

http://docs.jquery.com/Manipulation

$ ( "# field-name"). text ( "일부 새로운 텍스트.");

구조를 가정 할 수없는 경우 innerText를 사용하십시오. Text # data를 사용하여 기존 텍스트 성능 테스트 를 업데이트하십시오.

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

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

다음은 쉬운 jQuery 방법입니다.

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

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

HTML에서 이것을 넣어

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

자바 스크립트에서 이것을 넣어

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