JavaScript에서 span 요소의 텍스트를 변경하는 방법

스팬이 있으면 다음과 같이 말합니다.

<span id="myspan"> hereismytext </span>

JavaScript를 사용하여 "hereismytext"를 "newtext"로 변경하려면 어떻게합니까?

최신 브라우저의 경우 다음을 사용해야합니다.

document.getElementById("myspan").textContent="newtext";

구형 브라우저는 알 수 없지만 새 텍스트가 사용자 입력 인 경우 XSS 취약점이 발생하므로 textContent사용하지 않는 것이 좋습니다 innerHTML(자세한 내용은 아래의 다른 답변 참조).

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!!
document.getElementById("myspan").innerHTML="newtext";

사용 innerHTML을하는 것이 됩니다 SO 권장되지 . 대신 textNode를 만들어야합니다. 이런 식으로, 당신은 당신의 텍스트를 "바인딩"하고 적어도이 경우 XSS 공격에 취약하지 않습니다.

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!!

옳은 길:

span = document.getElementById("myspan");
txt = document.createTextNode("your cool text");
span.appendChild(txt);

이 취약점에 대한 자세한 내용 : XSS (Cross Site Scripting)-OWASP

2017 년 11 월 4 일 수정 :

@mumush 제안 에 따라 수정 된 세 번째 코드 줄 : "use appendChild (); 대신 사용". @Jimbo Jonny
에 따르면 Btw는 모든 것을 원칙으로 보안을 적용하여 사용자 입력으로 취급해야한다고 생각합니다. 그렇게하면 놀라움을 느끼지 않을 것입니다.

document.getElementById('myspan').innerHTML = 'newtext';

편집 : 이것은 2014 년에 작성되었습니다. 더 이상 IE8에 관심이 없으며을 사용하는 것을 잊어 버릴 수 있습니다 innerText. 그냥 사용 textContent하고 끝내십시오.

텍스트를 제공하는 사람이고 사용자가 텍스트를 제공하지 않는 부분 (또는 사용자가 제어하지 않는 다른 소스) 인 경우 설정 innerHTML이 허용 될 수 있습니다.

// * Fine for hardcoded text strings like this one or strings you otherwise 
//   control.
// * Not OK for user-supplied input or strings you don't control unless
//   you know what you are doing and have sanitized the string first.
document.getElementById('myspan').innerHTML = 'newtext';

그러나 다른 사람들이 지적했듯이 텍스트 문자열의 소스 innerHTML가 아닌 경우 먼저 텍스트를 올바르게 위생 처리하는 데주의하지 않으면를 사용하면 XSS와 같은 콘텐츠 삽입 공격이 발생할 수 있습니다.

사용자의 입력을 사용하는 경우 브라우저 간 호환성을 유지하면서 안전하게 입력하는 방법은 다음과 같습니다.

var span = document.getElementById('myspan');
span.innerText = span.textContent = 'newtext';

Firefox는 지원하지 않으며 innerTextIE8은 지원하지 않으므로 textContent브라우저 간 호환성을 유지하려면 두 가지를 모두 사용해야합니다.

그리고 가능한 경우 리플 로우를 피하려면 (로 인한 innerText)

var span = document.getElementById('myspan');
if ('textContent' in span) {
    span.textContent = 'newtext';
} else {
    span.innerText = 'newtext';
}

나는 Jquery위의 어느 것도 사용 하지 않았지만 왜 그런지 모르겠지만 이것이 효과가 있었다.

 $("#span_id").text("new_value");

다른 방법이 있습니다.

var myspan = document.getElementById('myspan');

if (myspan.innerText) {
    myspan.innerText = "newtext";
}
else
if (myspan.textContent) {
        myspan.textContent = "newtext";   
}

innerText 속성은 Safari, Google Chrome 및 MSIE에서 감지됩니다. Firefox의 경우 표준 작업 방법은 textContent를 사용하는 것이었지만 버전 45부터 누군가가 최근에 친절하게 설명했듯이 innerText 속성도 있습니다. 이 솔루션은 브라우저가 이러한 특성 중 하나를 지원하는지 여부를 테스트하고, 해당되는 경우 "새 텍스트"를 지정합니다.

라이브 데모 : 여기

위의 순수한 자바 스크립트 답변 외에도 다음과 같이 jQuery 텍스트 메소드를 사용할 수 있습니다 .

$('#myspan').text('newtext');

span 또는 div 요소의 html 내용 을 가져 오거나 변경하기 위해 답변을 확장 해야하는 경우 다음 을 수행 할 수 있습니다.

$('#mydiv').html('<strong>new text</strong>');

참고 문헌 :

.text () : http://api.jquery.com/text/

.html () : http://api.jquery.com/html/

메소드가 지정된 선택기로 첫 번째 요소를 리턴하므로 'myspan'id가 고유하다고 가정하면 querySelector () 메소드를 사용할 수도 있습니다.

document.querySelector('#myspan').textContent = 'newtext';

developer.mozilla

다른 답변과 마찬가지로 innerHTML 및 innerText 는 권장하지 않으므로 textContent를 사용하는 것이 좋습니다 . 이 속성은 잘 지원되며 다음을 확인할 수 있습니다. http://caniuse.com/#search=textContent

document.getElementById("myspan").textContent="newtext";

ID가있는 dom-node를 선택 myspan하고 텍스트 내용을new text

넌 할 수있어

 document.querySelector ( "[Span]"). textContent = "content_to_display"; 

이 스팬

<span id="name">sdfsdf</span>

당신은 다음과 같이 갈 수 있습니다 :-

$("name").firstChild.nodeValue = "Hello" + "World";