div 요소 내의 텍스트를 대체하려면 어떻게 해야 합니까?

div 요소 내의 텍스트를 대체하려면 어떻게 해야 합니까?

DIV 요소 내에서 텍스트를 동적으로 설정해야 합니다.브라우저 안전한 최고의 접근 방식은 무엇입니까?프로토타입 js와 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
}

다음을 간단히 사용할 수 있습니다.

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만 사용하므로 다른 언어로 이동할 수 있으며 비표준 내부 HTML에 의존하지 않습니다.
2. fieldName에 HTML이 포함되어 있을 수 있으며 이는 시도된 XSS 공격일 수 있습니다.만약 우리가 그것이 단지 텍스트라는 것을 안다면, 우리는 HTML을 위해 브라우저가 그것을 구문 분석하도록 하는 것이 아니라 텍스트 노드를 만들어야 합니다.

자바스크립트 라이브러리를 사용하려면 jQuery를 사용하고 다음 작업을 수행합니다.

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

@Anthony에 주목합니다.WJones의 설명이 맞습니다. "field_name"은 특별히 설명적인 ID나 변수 이름이 아닙니다.

프로토타입을 사용할 것입니다.update일반 텍스트, HTML 스니펫 또는 정의하는 자바스크립트 객체를 지원하는 방법toString방법.

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

• Element.업데이트 설명서

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

프로토타입의 멋진 기능 중 하나는$('field_name')와 같은 일을 합니다.document.getElementById('field_name')사용하세요! :-)

프로토타입을 사용한 존 토플리의 답변update기능은 또 다른 좋은 해결책입니다.

빠른 대답은 이너를 사용하는 것입니다.HTML(또는 거의 동일한 프로토타입의 업데이트 방법).내면의 문제HTML은 할당된 콘텐츠를 이스케이프해야 한다는 것입니다.목표에 따라 다른 코드 또는

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를 사용할 수 있습니다. 이것은 완전한 솔루션은 아니지만 둘 다 inner를 사용하지 않습니다.원시 HTML입니다.

중단한 부분을 계속 진행하기를 정말로 원한다면 다음과 같은 작업을 수행할 수 있습니다.

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

만약 당신이 당신의 사이트에서 많은 자바스크립트를 사용하기 시작하고 싶다면, jQuery는 DOM을 가지고 노는 것을 매우 간단하게 만듭니다.

http://docs.jquery.com/Manipulation

$("#field-name").text("새로운 텍스트")처럼 단순하게 만듭니다.");

구조를 가정할 수 없는 경우 내부 텍스트 사용 - 텍스트 #데이터를 사용하여 기존 텍스트 성능 테스트 업데이트

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>

Javascript에 이것을 넣으십시오.

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

언급URL : https://stackoverflow.com/questions/121817/how-do-i-replace-text-inside-a-div-element