ฉันจะเปลี่ยนข้อความขององค์ประกอบ span ใน 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";

การใช้innerHTMLจะไม่แนะนำให้ใช้ คุณควรสร้าง textNode แทน ด้วยวิธีนี้คุณจะ "ผูกมัด" ข้อความของคุณและอย่างน้อยในกรณีนี้คุณอาจเสี่ยงต่อการถูกโจมตีด้วย XSS

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

ทางที่ถูก:

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับช่องโหว่นี้: Cross Site Scripting (XSS) - OWASP

แก้ไขเมื่อวันที่ 4 พฤศจิกายน 2017:

แก้ไขโค้ดบรรทัดที่สามตามคำแนะนำ@mumush : "use appendChild (); แทน"
Btw ตาม@Jimbo Jonnyฉันคิดว่าทุกสิ่งควรได้รับการปฏิบัติเหมือนเป็นข้อมูลผู้ใช้โดยใช้หลักการความปลอดภัยตามเลเยอร์ ด้วยวิธีนี้คุณจะไม่พบกับความประหลาดใจใด ๆ

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ดังนั้นคุณต้องใช้ทั้งคู่หากคุณต้องการรักษาความเข้ากันได้ของเบราว์เซอร์

และหากคุณต้องการหลีกเลี่ยงการ reflows (เกิดจาก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 มันก็มีคุณสมบัติด้านในเหมือนกัน โซลูชันนี้ทดสอบเพื่อดูว่าเบราว์เซอร์รองรับคุณสมบัติเหล่านี้หรือไม่และถ้าเป็นเช่นนั้นจะกำหนด "newtext"

การสาธิตสด: ที่นี่

นอกเหนือจากคำตอบของจาวาสคริปต์บริสุทธิ์ข้างต้นคุณสามารถใช้วิธีการข้อความ jQuery ดังต่อไปนี้:

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

หากคุณต้องการขยายคำตอบเพื่อรับ / เปลี่ยนเนื้อหาhtmlขององค์ประกอบแบบขยายหรือแบบ div คุณสามารถทำได้ดังนี้:

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

อ้างอิง:

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

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

นอกจากนี้คุณยังสามารถใช้วิธี querySelector () โดยสมมติว่า 'myspan' id นั้นไม่เหมือนใครเนื่องจากวิธีนี้จะคืนค่าองค์ประกอบแรกด้วยตัวเลือกที่ระบุ:

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

developer.mozilla

เช่นเดียวกับในคำตอบอื่น ๆinnerHTMLและinnerTextไม่แนะนำให้ใช้ก็ใช้ดีกว่าtextContent คุณลักษณะนี้ได้รับการสนับสนุนอย่างดีคุณสามารถตรวจสอบได้ที่นี่: http://caniuse.com/#search=textContent

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

สิ่งนี้จะเลือก dom-node พร้อม id myspanและเปลี่ยนเนื้อหาเป็นnew text

คุณทำได้

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

สำหรับช่วงนี้

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

คุณสามารถไปเช่นนี้: -

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