كيف يمكنني استبدال النص داخل div عنصر ؟

Question

أحتاج إلى وضع النص داخل DIV عنصر حيوي.ما هو أفضل متصفح آمن النهج ؟ لدي prototypejs و scriptaculous المتاحة.

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

هنا ما وظيفة سوف تبدو مثل:

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

Answer 1

وأود أن استخدام النموذج update الأسلوب الذي يدعم نص عادي ، بلصق الكود أو أي كائن جافا سكريبت الذي يحدد toString الأسلوب.

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

• العنصر.تحديث الوثائق

Answer 2

يمكنك ببساطة استخدام:

fieldNameElement.innerHTML = "My new text!";

Answer 3

تحديث كل من يقرأ هذا في عام 2013 وما بعدها:

إجابة الكثير من كبار المسئولين الاقتصاديين ، ولكن كل الإجابات بشدة قديما وتعتمد على المكتبات أن تفعل الأشياء التي جميع المتصفحات الحالية لا في الخروج من مربع.

استبدال النص داخل عنصر div استخدام عقدة.textContent ، والتي يتم توفيرها في جميع المتصفحات الحالية.

fieldNameElement.textContent = "New text";

Answer 4

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. ويستخدم فقط في دوم ، لذلك هذه التقنية المحمولة إلى لغات أخرى, و لا تعتمد على غير مستوى innerHTML
2. fieldName قد تحتوي على HTML ، التي يمكن أن تكون محاولة هجوم XSS.إذا كنا نعرف انها مجرد النص ، ينبغي أن يكون خلق عقدة النص بدلا من المتصفح تحليل HTML

إذا كنت تنوي استخدام مكتبة جافا سكريبت, كنت استخدم مسج, و لا هذا:

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

علما بأن @AnthonyWJones' تعليق هو الصحيح:"field_name" ليس وصفي معرف أو اسم متغير.

Answer 5

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

واحدة من الميزات أنيق من النموذج هو أن $('field_name') هل نفس الشيء document.getElementById('field_name').استخدامه!:-)

جون Topley رد باستخدام النموذج update وظيفة هو آخر حل جيد.

Answer 6

الجواب السريع هو أن استخدام 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 في الخام.

Answer 7

إذا كنت حقا تريد منا أن تستمر من حيث توقفت ، هل يمكن أن تفعل:

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';

Answer 8

nodeValue هو أيضا معيار دوم الخاصية يمكنك استخدامها:

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}

Answer 9

el.innerHTML='';
el.appendChild(document.createTextNode("yo"));

Answer 10

إذا كنت تميل إلى البدء في استخدام الكثير من جافا سكريبت على موقع الويب الخاص بك ، مسج يجعل اللعب مع دوم بسيطة للغاية.

http://docs.jquery.com/Manipulation

يجعل من بسيطة مثل:$("#الميدان اسم").النص("النص الجديد.");

Answer 11

استخدام innerText إذا كنت لا تستطيع تحمل هيكل - استخدام النص#البيانات لتحديث القائمة النص اختبار الأداء

Answer 12

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}

Answer 13

وهنا سهلة مسج الطريقة:

var el = $('#yourid .yourclass');

el.html(el.html().replace(/Old Text/ig, "New Text"));