스팬이 있으면 다음과 같이 말합니다.
<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는 지원하지 않으며 innerText
IE8은 지원하지 않으므로 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/