ฉันจะแทนที่ข้อความภายในองค์ประกอบ div ได้อย่างไร

ฉันต้องตั้งค่าข้อความภายในองค์ประกอบ DIV แบบไดนามิก อะไรคือวิธีที่ปลอดภัยและดีที่สุดสำหรับเบราว์เซอร์ ฉันมีต้นแบบและสคริปต์ที่ใช้ได้

<div id="panel">
  <div id="field_name">TEXT GOES HERE</div>
</div>

ฟังก์ชันจะมีลักษณะดังนี้:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}

ฉันจะใช้updateวิธีของ Prototype ที่สนับสนุนข้อความธรรมดาตัวอย่าง HTML หรือวัตถุ JavaScript ใด ๆ ที่กำหนดtoStringวิธีการ

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

• เอกสารประกอบ Element.update

คุณสามารถใช้:

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 เท่านั้นดังนั้นเทคนิคนี้สามารถพกพาไปยังภาษาอื่น ๆ ได้และไม่ต้องพึ่งพา innerHTML ที่ไม่ได้มาตรฐาน
2. fieldName อาจมี HTML ซึ่งอาจเป็นการพยายามโจมตี XSS หากเรารู้ว่ามันเป็นเพียงข้อความเราควรสร้างโหนดข้อความแทนการให้เบราว์เซอร์แยกวิเคราะห์สำหรับ HTML

ถ้าฉันจะใช้ไลบรารี javascript ฉันจะใช้ jQuery และทำสิ่งนี้:

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

โปรดทราบว่าความคิดเห็น @AnthonyWJonesนั้นถูกต้อง: "field_name" ไม่ใช่รหัสอธิบายหรือชื่อตัวแปรโดยเฉพาะ

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

หนึ่งในคุณสมบัติที่ดีของต้นแบบคือว่าจะเป็นสิ่งเดียวกับ$('field_name') document.getElementById('field_name')ใช้มัน! :-)

คำตอบของ John Topley ที่ใช้updateฟังก์ชั่นของ Prototype เป็นอีกทางเลือกที่ดี

คำตอบอย่างรวดเร็วคือการใช้ innerHTML (หรือวิธีการอัปเดตของต้นแบบที่เหมือนกันมาก) ปัญหาของ InnerHTML คือคุณต้องหลีกเลี่ยงเนื้อหาที่ได้รับมอบหมาย ขึ้นอยู่กับเป้าหมายของคุณคุณจะต้องทำเช่นนั้นด้วยรหัสอื่นหรือ

ใน 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 หากคุณต้องการการสนับสนุนเบราว์เซอร์ที่กว้างที่สุดเท่าที่จะเป็นไปได้นี่ไม่ใช่การแก้ปัญหาที่สมบูรณ์ แต่ไม่ได้ใช้ InnerHTML ในการดิบ

หากคุณต้องการให้เราดำเนินการต่อจากจุดที่คุณค้างไว้คุณสามารถทำได้:

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

หากคุณอยากเริ่มใช้ JavaScript เป็นจำนวนมากบนไซต์ของคุณ jQuery ทำให้การเล่นกับ DOM ง่ายมาก

http://docs.jquery.com/Manipulation

ทำให้ง่ายเหมือน: $ ("# field-name"). text ("ข้อความใหม่บางคำ");

ใช้ innerText หากคุณไม่สามารถถือว่าโครงสร้าง - ใช้ Text # data เพื่ออัปเดตการทดสอบประสิทธิภาพของข้อความที่มีอยู่

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';}