JavaScript를 사용하여 스판 요소의 텍스트를 변경하려면 어떻게 해야 합니까?

JavaScript를 사용하여 스판 요소의 텍스트를 변경하려면 어떻게 해야 합니까?

스팬이 있는 경우 다음과 같이 말합니다.

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

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

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

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

는 ""를 하지 못할 수 .textContent , 는 사용하지 것이 .innerHTML새로운 텍스트가 사용자 입력일 때 XSS 취약성이 발생하므로 자세한 내용은 다음 답변을 참조하십시오.

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

내부 사용HTML은 권장하지 않습니다.대신 textNode를 작성해야 합니다.이렇게 하면 텍스트가 "바인딩"되고 적어도 이 경우 XSS 공격에 취약하지 않습니다.

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

올바른 방법:

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

이 취약성에 대한 자세한 내용은 다음을 참조하십시오.사이트 간 스크립팅(XSS) - OWASP

2017년 11월 4일 편집 :

@mumush 제안에 따라 코드의 세 번째 줄 "대신 append Child(); 사용"을 수정했습니다.
그런데 @Jimbo Jonny에 따르면 모든 것은 층별 보안 원칙을 적용하여 사용자 입력으로 취급해야 한다고 생각합니다.그래야 놀랄 일이 없을 거야

편집: 이것은 2014년에 작성되었습니다.많은 것이 바뀌었다.IE8에 대해 더 이상 신경 쓰지 않을 것입니다.Firefox는 이제innerText.

소스)에 의해 하지 않는 , " "를합니다."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';
}

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

용 i i i i를 쓴다.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에서 탐지됩니다.파이어폭스의 경우 textContent를 사용하는 것이 일반적인 방법이었지만, 버전 45부터는 innerText 속성도 포함되어 있습니다.최근 누군가가 친절하게 알려줬습니다.이 솔루션은 브라우저가 이러한 속성 중 하나를 지원하는지 여부를 테스트하고 지원한다면 "새 텍스트"를 할당합니다.

라이브 데모: 이쪽

위의 순수 javascript 답변 외에 다음과 같이 jQuery 텍스트 메서드를 사용할 수 있습니다.

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

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

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

참고 자료:

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

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

querySelector() 메서드는 지정된 셀렉터를 가진 첫 번째 요소를 반환하기 때문에 'myspan' ID가 고유하다고 가정할 수도 있습니다.

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

developer.developer.develope

다른 대답처럼 내면의HTML 및 innerText는 권장하지 않습니다.textContent를 사용하는 것이 좋습니다.이 속성은 잘 지원됩니다.http://caniuse.com/ #search=textContent를 확인할 수 있습니다.

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

ID가 "Dom-node"인 ""가됩니다.myspan텍스트 내용을 로 변경합니다.new text

할수있습니다

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

(function ($) {
    $(document).ready(function(){
    $("#myspan").text("This is span");
  });
}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="myspan"> hereismytext </span>

"displaces"text()스팬 텍스트를 변경합니다.

다음과 같은 HTML 코드 삽입과 함께 사용할 수 없습니다.
var a = "get the file <a href='url'>the link</a>"
var b = "get the file <a href='url'>another link</a>"
var c = "get the file <a href='url'>last link</a>"

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

<span id="myspan">first text</span>

타이머를 사용하여 참조 대상을 텍스트로 표시할 뿐 코드를 실행하지 않습니다.이 경우에도 소스 코드에 올바르게 표시됩니다.jquery 어프로치가 실제로 솔루션이 아닌 경우 다음을 사용합니다.

document.getElementById("myspan").innerHTML = a to c;
가장 좋은 방법이라고 생각합니다.

2022년에도 많은 사람들이 이 질문을 접하고 있으며, 이용 가능한 답변은 아직 최신이 아니다.

innerText 입니다.

MDM Docs에서 볼 수 있듯이 innerText의 텍스트를 검색 및 변경하는 가장 좋은 방법입니다.<span>Javascript jav통 htmlHTML jav jav jav 。

innerText속성이 매우 잘 지원됩니다(Caniuse에 따르면 전체 웹 사용자의 97.53%).

사용방법

다음과 같이 속성을 사용하여 새 텍스트를 검색하고 설정하십시오.

let mySpan = document.getElementById("myspan");

console.log(mySpan.innerText);

mySpan.innerText = "Setting a new text content into the span element.";

왜더보다 요?innerHTML

마세요innerHTML사용자 입력으로 콘텐츠를 업데이트하면 설정할 문자열 내용이 해석되어 HTML 태그로 변환되므로 심각한 취약성이 발생할 수 있습니다.

즉, 사용자가 사이트에 스크립트를 삽입할 수 있습니다.이것은 XSS 공격/취약성(사이트 간 스크립팅)이라고 불립니다.

왜더보다 요?textContent

번째 포인트 ★★★★★★★★★★★★★★★★★★★★」textContentIE8에서는 지원되지 않습니다(하지만 2022년에는 아무도 신경 쓰지 않을 것입니다). 그 는 '실제'를 사용해서 얻을 수 입니다.textContentinnerText.

MDM 문서의 예는 이를 설명하는 데 매우 적합합니다.따라서 다음과 같은 설정을 실시합니다.

<p id="source">
  <style>#source { color: red;  } #text { text-transform: uppercase; }</style>
<span id=text>Take a look at<br>how this text<br>is interpreted
       below.</span>
  <span style="display:none">HIDDEN TEXT</span>
</p>

사용하시는 경우innerText텍스트 내용을 검색하다<p id="source">을 사용하다

TAKE A LOOK AT
HOW THIS TEXT
IS INTERPRETED BELOW.

이게 바로 우리가 원하던 거야

사용하겠습니다.textContent을 사용하다

  #source { color: red;  } #text { text-transform: uppercase; }
Take a look athow this textis interpreted
       below.
  HIDDEN TEXT

네가 기대했던 것과는 다르게...

에 '우리'를 사용해서textContent올바른 방법이 아닙니다.

마지막 포인트

가 ""만 을 목표로 <p> ★★★★★★★★★★★★★★★★★」<span>HTML 요소, nicoo의 답변입니다.새 텍스트 노드를 생성하여 다음과 같이 기존 요소에 추가할 수 있습니다.

let mySpan = document.getElementById("myspan");

const newTextNode = document.createTextNode("Youhou!"),

mySpan.appendChild(newTextNode);

이 기간 동안

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

다음과 같이 할 수 있습니다:-

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

썼어 ★★★★★★★★★★★★★★★★★★.document.querySelector('ElementClass').innerText = 'newtext';

클래스/버튼 내의 스판, 텍스트와 연동되는 것으로 보입니다.

어떤 이유에서인지 대부분의 브라우저에서는 "텍스트" 속성을 사용하는 것이 좋은 방법인 것 같습니다.그것은 나에게 효과가 있었다.

$("#span_id.").텍스트(할당 텍스트 값);

언급URL : https://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-using-javascript