আমি কীভাবে একটি ডিভ এলিমেন্টের ভিতরে পাঠ্য প্রতিস্থাপন করব?

Question

আমার পাঠ্যটি একটি ডিআইভি উপাদানটির মধ্যে গতিশীলভাবে সেট করা দরকার। সেরা, ব্রাউজার নিরাপদ পদ্ধতির কী? আমার কাছে প্রোটোটাইপস এবং স্ক্রিপ্টাকুলাস উপলব্ধ।

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

এখানে ফাংশনটি দেখতে কেমন হবে তা এখানে:

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

Comments

নির্ধারিত পাঠ্যের মতো যখন গৃহীত উত্তরগুলি আপনি যা চান তা কি তা করে: - <স্প্যান শৈলী = "ফন্ট-আকার: 36pt"> এটি বড় </ span>। যদি এই আচরণটি কাঙ্ক্ষিত হয় তবে আপনি কি প্রশ্নের সাথে মিল রেখে পুনরায় বাক্য তৈরি করতে পারেন?

— অ্যান্টনিডব্লোন জোন্স

এটি কি এক্সএসএস ইনজেকশন আক্রমণে ব্যবহার করা যেতে পারে?

— জেমস ওয়েস্টগেট

Answer 1

আমি প্রোটোটাইপের updateপদ্ধতিটি ব্যবহার করব যা প্লেইন পাঠ্য, একটি এইচটিএমএল স্নিপেট বা কোনও জাভাস্ক্রিপ্ট অবজেক্ট সমর্থন করে যা কোনও toStringপদ্ধতি নির্ধারণ করে ।

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

• এলিমেন্ট.আপডেট ডকুমেন্টেশন

Comments

@ আইয়্যুন ওপি সূচিত করেছে যে তারা ইতিমধ্যে প্রোটোটাইপ ব্যবহার করছে, সুতরাং যদি এটি হয় তবে এটির সুবিধা গ্রহণ করা বুদ্ধিমান।

— জন টপলি

আমার কাছে কেন কেবল কাজ করে$("field_name").text("new text");

— ড্রকো

@ ড্রাকো আপনি কি প্রোটোটাইপজেএস ব্যবহার করছেন?

— জন টপেলি

@ ড্রাকো সাত বছর আগের আসল প্রশ্ন এবং আমার উত্তরগুলি প্রোটোটাইপজেএস-এর জন্য, jQuery নয়।

— জন টপলি

Answer 2

আপনি কেবল ব্যবহার করতে পারেন:

fieldNameElement.innerHTML = "My new text!";

Comments

'স্ট্যাটিক' পাঠ্যের জন্য একক উদ্ধৃতি ব্যবহার করা উচিত নয়?

— মিলান বাবুস্কভ

পিএইচপি-তে, হ্যাঁ। জাভাস্ক্রিপ্টে, আমি বিশ্বাস করি না যে এটি গুরুত্ব দেয়।

— ceejayoz

জাভাস্ক্রিপ্টে, একক এবং ডাবল উদ্ধৃতিগুলি বিনিময়যোগ্য।

— 26

খারাপ পরামর্শ, কারণ পাঠ্যে দুর্ঘটনাক্রমে এইচটিএমএল-মার্কআপের মতো সামগ্রী থাকতে পারে

— ট্রিটেন্ট

element.innerHTML = "<script>doSomethingMalicious()</script>";একটি ভাল ধারণা হবে না। element.innerHTML = "& neither will this";

— জোসেফ নিল্ডস

Answer 3

2013 এবং পরবর্তী সময়ে এটি পড়া প্রত্যেকের জন্য আপডেট হয়েছে:

এই উত্তরটির অনেকগুলি এসইও রয়েছে তবে সমস্ত উত্তরগুলি মারাত্মকভাবে পুরানো হয়ে গেছে এবং সমস্ত বর্তমান ব্রাউজারগুলি বাক্সের বাইরে এমন কাজগুলি করার জন্য গ্রন্থাগারগুলির উপর নির্ভর করে।

কোনও ডিভ উপাদানটির ভিতরে পাঠ্য প্রতিস্থাপন করতে নোড.টেক্সট কনটেন্ট ব্যবহার করুন, যা সমস্ত বর্তমান ব্রাউজারগুলিতে সরবরাহ করা হয়।

fieldNameElement.textContent = "New text";

Comments

@ লেগোলাস দুই বছর আগে 'বর্তমান ব্রাউজার' লিখছেন।

— মাইকম্যাকানা

ধন্যবাদ! আমি অন্যান্য উত্তরগুলি চেষ্টা করছিলাম, ভেবে অবাক হলাম কেন 'ইনারএইচটিএমএল' কাজ করছে না।

— গ্রেজেজ

আপনি কেন textContentউচ্চতর পদ্ধতি innerHTMLএটি বিশদটি বিবেচনা করতে পারেন : ইচ্ছাকৃতভাবে HTML মার্কআপ markোকানোর চেষ্টা না করার সময় এটি দ্রুত, নিরাপদ এবং আরও উপযুক্ত।

— পারফরম্যান্স

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. এটি কেবল ডোম ব্যবহার করে, সুতরাং প্রযুক্তিটি অন্য ভাষাগুলির কাছে বহনযোগ্য এবং অ-মানক অভ্যন্তরীণ এইচটিএমএলের উপর নির্ভর করে না
2. ফিল্ডনামে এইচটিএমএল থাকতে পারে যা একটি এক্সএসএস আক্রমণের চেষ্টা হতে পারে। যদি আমরা জানি এটি কেবল পাঠ্য, তবে আমাদের ব্রাউজারটি এটিএমএলএলটির বিশ্লেষণের পরিবর্তে একটি পাঠ্য নোড তৈরি করা উচিত

আমি যদি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে যাচ্ছিলাম, আমি jQuery ব্যবহার করতাম এবং এটি করতাম:

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

মনে রাখবেন যে @ অ্যান্থনি ডাব্লু জোন্স'র মন্তব্যটি সঠিক: "ক্ষেত্রের নাম" কোনও বিশেষ বর্ণনামূলক আইডি বা পরিবর্তনশীল নাম নয়।

Comments

আপনি অন্য কোন ভাষায় এই কৌশলটি বন্দর করতে পারেন?

— জন টপলি

ডিওএম বাস্তবায়ন সহ যে কোনও ভাষা এটিকে সমর্থন করে (এবং বেশিরভাগ ভাষায় একটি ডিওএম বাস্তবায়ন থাকে)।

— কোয়ান্টিন

এটি উত্তম উত্তর, আমার চেয়ে ভাল এবং সঠিক উত্তর। আপনি যদিও উদাহরণটি পরিপাটি করা বিবেচনা করতে পারেন। 'ক্ষেত্রের নাম' ফাংশনের প্যারামিটারের জন্য ভাল নাম নয়। আসলে উপাদান আইডির জন্য দু'একটি গ্রহণ করা ভাল, অর্থাত্; এলেমআইডি, সামগ্রী

— অ্যান্টনিডব্লু জোন্স

আমি প্রশ্ন থেকেই ক্ষেত্রের নাম এবং আইডি ধার নিয়েছি।

— ড্যানিয়েল পাপাসিয়ান

প্রশ্নটি সম্ভবত ক্ষেত্রের নাম ব্যবহার করে উদাহরণটিকে জেনারিক করে তুলবে। এছাড়াও প্রশ্নকর্তা উল্লেখ করেছেন যে প্রোটোটাইপ উপলব্ধ তবে jQuery নয়।

— জন টপলি

Answer 5

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

প্রোটোটাইপের একটি নিফটি বৈশিষ্ট্য হ'ল $('field_name')এটি একই কাজ করেdocument.getElementById('field_name') । এটা ব্যবহার করো! :-)

প্রোটোটাইপের updateফাংশন ব্যবহার করে জন টপলির উত্তর আরেকটি ভাল সমাধান।

Comments

এটি জাভাস্ক্রিপ্ট মত দেখাচ্ছে না?

— মিলান বাবুস্কভ

ইনটারএইচটিএমএল ব্যবহার করবেন না। এটি কোনও ডাব্লু 3 সি সুপারিশ নয় এবং বেমানান আচরণ করে। এটি খারাপ স্টাইল হিসাবে বিবেচনা করা হয়।

— টম

টম, পরিবর্তে কী ব্যবহার করা উচিত (যদি আপনি প্রোটোটাইপ ব্যবহার না করেন)?

— মিলান বাবুস্কভ

মিলান, আরও স্বীকৃত উপায় হ'ল চাইল্ডনোডগুলির মধ্য দিয়ে লুপ করা, প্রতিটিটিতে রিমুডনোড (সত্য) কল করা, তারপরে ডকুমেন্ট.ক্রেটএলিমেন্ট () বা ডকুমেন্ট.createTextNode () ব্যবহার করে নির্মিত নতুন নোড যুক্ত করা। আপনার যদি এটি করার দরকার হয় তবে আমি অনেক টাইপিং এড়াতে একটি ফাংশন লেখার পরামর্শ দেব।

— জোয়েল আনায়ার 15

পছন্দ করুন এই প্রশ্নোত্তর প্রোটোটাইপ.জেএস সম্পর্কে, jQuery নয়। প্রোটোটাইপ $আইডি দ্বারা একটি আইটেম সন্ধান করে। এটি jQuery এর মতো নির্বাচক-ভিত্তিক নয়। api.prototypejs.org/dom/dollar

— ceejayoz

Answer 6

দ্রুত উত্তরটি হ'ল অভ্যন্তরীণ এইচটিএমএল (বা প্রোটোটাইপের আপডেট পদ্ধতি যা একই জিনিস।) অভ্যন্তরীণ এইচটিএমএল সমস্যাটি হ'ল আপনার নির্ধারিত সামগ্রীটি এড়ানো দরকার। আপনার টার্গেটের উপর নির্ভর করে আপনাকে অন্য কোড ওআর দিয়ে তা করতে হবে

আইই তে: -

document.getElementById("field_name").innerText = newText;

এফএফ এ: -

document.getElementById("field_name").textContent = newText;

(আসলে এফএফের কোড অনুসারে নিম্নলিখিতটি উপস্থিত থাকে)

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

এখন আমি কেবল ইন্টার্নটেক্সট ব্যবহার করতে পারি যদি আপনার আরও বিস্তৃত সম্ভব ব্রাউজারের সমর্থন প্রয়োজন হয় তবে এটি সম্পূর্ণ সমাধান নয় তবে কাঁচা অভ্যন্তরীণ এইচটিএমএলও ব্যবহার করছে না।

Answer 7

আপনি যদি সত্যিই চান যেখানে আপনি যেখানে রেখে গেছেন কেবল চালিয়ে যান, আপনি এটি করতে পারেন:

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

Answer 8

নোডভ্যালু হ'ল একটি স্ট্যান্ডার্ড ডোম সম্পত্তি যা আপনি ব্যবহার করতে পারেন:

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

আপনি যদি নিজের সাইটে প্রচুর জাভাস্ক্রিপ্ট ব্যবহার করা শুরু করতে চান তবে jQuery DOM এর সাথে খেলা অত্যন্ত সহজ করে তোলে।

http://docs.jquery.com/Manipulation

এটিকে এত সহজ করে তোলে: $ ("# ক্ষেত্রের নাম") text পাঠ্য ("কিছু নতুন পাঠ্য" ");

Comments

প্রোটোটাইপের অনুরূপ ইউটিলিটি ফাংশন রয়েছে।

— সেজেজোজ

Answer 11

আপনি যদি কাঠামো ধরে নিতে না পারেন তবে ইন্টার্নটেক্সট ব্যবহার করুন - বিদ্যমান পাঠ্য পারফরম্যান্স টেস্ট আপডেট করতে টেক্সট # ডেটা ব্যবহার করুন

Answer 12

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

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

Comments

নোডটি প্রতিস্থাপন করা এরপরে এটি অপসারণ করা এবং দুটি পৃথক ক্রিয়াকলাপ হিসাবে একটি নতুন যুক্ত করা ভাল।

— কোয়ান্টিন

Answer 13

এখানে একটি সহজ jQuery উপায়:

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

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

Comments

এটি একটি খারাপ ধারণা বলে মনে হচ্ছে - যদি আপনার উপাদানটিতে একই পাঠ্য সহ সাবনোড থাকে বা আপনার পাঠ্য কোনও উপাদান ট্যাগের নামের সাথে মিলে যায় তবে কী হবে? কেন শুধু টেক্সট ব্যবহার করবেন না?

— জেমস ওয়েস্টগেট 11

আমি জেমস ওয়েস্টগেটের সাথে পুরোপুরি একমত, এটি করা উচিত নয়।

— টিগ্রারিট

Answer 14

এইচটিএমএল এ রাখুন

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

জাভাস্ক্রিপ্ট এ রাখুন

var fieldNameElement = document.getElementById('field_name');
        if (fieldNameElement)
        {fieldNameElement.innerHTML = 'some HTML';}