কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে ডিভিতে ডেটা সংযোজন করবেন?

Question

আমি অজ্যাক্সটি ডিভ উপাদানটির সাথে ডেটা যুক্ত করার জন্য ব্যবহার করছি, যেখানে আমি জাভাস্ক্রিপ্ট থেকে ডিভিটি পূরণ করব, ডিভের সাথে পাওয়া পূর্ববর্তী ডেটা না হারিয়ে আমি কীভাবে ডিভিতে নতুন ডেটা যুক্ত করতে পারি?

Comments

$ (DIV আছে) .append (ডাটা);

— জিমি

@ জিমি জকিউরির কথা বলছেন, এমন ক্ষুদ্র বিষয়গুলির জন্য এটি ব্যবহার করার দরকার নেই

— নফতালি ওরফে নীল

@ নিওর নিশ্চিত, তবে তিনি এজেএক্সও ব্যবহার করছেন, তাই jQuery অবশ্যই একটি ভাল ধারণা!

— Alnitak

@ অ্যালনিটাক, তবে আপনি কীভাবে জানবেন যে ওপি কোনও কিছুর জন্য jQuery ব্যবহার করছে?

— নফতালি ওরফে নীল

@Alnitak, jQuery এর নয় শুধুমাত্র Ajax সমাধান

— Naftali ওরফে নীল

Answer 1

এটা চেষ্টা কর:

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

Comments

বিপদ, উইল রবিনসন! এটি পাঠ্য নয়, এইচটিএমএল যুক্ত করে । যদি আপনার অতিরিক্ত স্টাফ ব্যবহারকারীর দ্বারা সরবরাহ করা হয় তবে আপনি সবেমাত্র একটি নিরাপত্তা দুর্বলতার পরিচয় দিয়েছেন। নীচে @ চান্দুর উত্তরটি ব্যবহার করা আরও ভাল।

— ডেভিড

হ্যাঁ, এটি একটি এক্সএসএস দুর্বলতা । নীচের উত্তরে বর্ণিত হিসাবে আপনি এর পরিবর্তে সামগ্রী সহ একটি পাঠ্য নোড তৈরি করা আরও ভাল।

— ডেভিড

এটি divইভেন্ট শ্রোতার সাথে উপাদান বা ব্যবহারকারী-প্রবেশ করা পাঠ্যের ইনপুটগুলির ক্ষেত্রেও কাজ করবে না । আমি চন্ডু দ্বারা উত্তর প্রস্তাব ।

— ব্যবহারকারী4642212

এটি প্রস্তাবিত নয়, দেখুন বংশধরদের ইভেন্ট শ্রোতাদের বিনষ্ট না করেই কি অভ্যন্তরীণ এইচটিএমএল যুক্ত করা সম্ভব?

— বার্গি

হ্যাঁ, আমি অবশ্যই এটির প্রস্তাব দিচ্ছি না কারণ এটি কোনও চেকবক্স, ইভেন্ট শ্রোতার অবস্থা নষ্ট করবে।

— কুড়কুলা

Answer 2

অ্যাপেন্ডচাইল্ড ব্যবহার করে:

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

অভ্যন্তরীণ এইচটিএমএল ব্যবহার করে:
এই পদ্ধতিটি @BiAiB দ্বারা উল্লিখিত হিসাবে বিদ্যমান উপাদানগুলির সকল শ্রোতাকে সরিয়ে ফেলবে। তাই আপনি যদি এই সংস্করণটি ব্যবহার করার পরিকল্পনা করছেন তবে সাবধানতা অবলম্বন করুন।

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>"; 

Comments

আমি এই পদ্ধতিটি আমার "সন্তোষজনক" উপাদানটি দিয়ে কৌণিক জাল বাঁধাইয়ের সাথে ব্যবহার করি এবং সবকিছু সঠিকভাবে কাজ করে!

— ভুলাইট

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

— জান Sverre

এটি আরও ভাল, তবে createTextNodeআপনি এইচটিএমএল লোড করা থাকলে কাজ করবে না। আপনি যদি তালিকা আইটেম যুক্ত করতে চান, উদাহরণস্বরূপ, এটি কাজ করবে না। এটা বেশ সীমাবদ্ধ।

— জ্যাক

আমরা যদি পরবর্তী ইভেন্টে একই সংযুক্ত পাঠ্য নোডের পাঠ্য পরিবর্তন করতে চাই তবে কী হবে?

— রাহুল মিশ্র

Answer 3

সাবধানতা অবলম্বন করুন innerHTML, আপনি যখন এটি ব্যবহার করেন তখন সাজানোর কোনও ক্ষতি :

theDiv.innerHTML += 'content',     

এর সমতুল্য:

theDiv.innerHTML = theDiv.innerHTML + 'content'

যা আপনার অভ্যন্তরের সমস্ত নোডকে ধ্বংস করবে divএবং নতুনগুলি পুনরায় তৈরি করবে। এর অভ্যন্তরের উপাদানগুলির সমস্ত উল্লেখ এবং শ্রোতা নষ্ট হবে ।

আপনার যদি এগুলি রাখার প্রয়োজন হয় (উদাহরণস্বরূপ, আপনি যখন একটি ক্লিক হ্যান্ডলার সংযুক্ত করেছেন), আপনাকে ডিওএম ফাংশন (অ্যাপেন্ডচিল্ড, ইনসার্টএফটার, ইনসার্ট বিটার) সহ নতুন সামগ্রীগুলি যুক্ত করতে হবে:

var newNode = document.createElement('div');      
newNode.innerHTML = data;
theDiv.appendChild( newNode )

Comments

হ্যাঁ তবে এটি প্যারেন্ট ডিভের ভিতরে একটি অতিরিক্ত ডিভ তৈরি করবে যা প্রয়োজন নেই এবং কিছু সিএসএস শৈলীর মধ্যে বিশৃঙ্খলা সৃষ্টি করতে পারে

— নফতালি ওরফে নীল

@ নিল এটি অ্যাপেন্ডচাইল্ড ব্যবহারের এক উদাহরণ মাত্র। বিষয়টি এখানে নয়।

— বিআইআইবি

করার সঠিক appendChildউপায়টি @ সাইবারনেট করেছিলেন

— নাফতালি ওরফে নীল

টুইট করুন এটি সঠিক বা ভুলও নয়। এটি কেবল ওপিকে কীভাবে যুক্ত করতে হবে তার উপর নির্ভর করে: পাঠ্য, এইচটিএমএল কোড বা অন্য কিছু।

— বিআইআইবি

@ নিল এটি ডেটা সংযোজনের একটি সঠিক উপায়, এবং এর চেয়ে বহুমুখী document.createTextNode()।

— Alnitak

Answer 4

আপনি যদি এটি দ্রুত করতে চান এবং উল্লেখগুলি এবং শ্রোতাদের হারাতে না চান তবে ব্যবহার করুন: .insertAdjacentHTML () ;

"এটা উপাদান reparse নেই এটিতে ব্যবহার করা হচ্ছে এবং এইভাবে এটা আছে না দুর্নীতিগ্রস্ত বিদ্যমান উপাদান উপাদান ভিতরে। এই, এবং এটি ধারাবাহিকতাতে করতে অতিরিক্ত পদক্ষেপ এড়ানো অনেক দ্রুত সরাসরি innerHTML ম্যানিপুলেশন চেয়ে।"

সমস্ত মূললাইন ব্রাউজারগুলিতে সমর্থিত (আই 6 +, এফএফ 8 +, অন্যান্য অন্যান্য এবং মোবাইল): http://caniuse.com/#feat=insertadjacenthtml

Https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentH HTML থেকে উদাহরণ

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Comments

এই পদ্ধতিটি ব্যবহার করার সময় কোনও বিবেচনা, বাধা ইত্যাদি রয়েছে?

— সোমবার

অসাধারণ সামঞ্জস্য: আরও ভাল সমাধান!

— আর্থার আরাআজো

এছাড়াও আছে insertAdjacentElement()এবং insertAdjacentText()।

— nyg

w3schools.com/jsref/met_node_insertadjacenthtml.asp

— প্রদীপ কুমার প্রবাহারন

এই পদ্ধতিটি সেরা সমাধান!

— সের্গেই এনএন

Answer 5

আপনি যদি jQuery ব্যবহার করেন তবে আপনি এটি ব্যবহার করতে পারেন $('#mydiv').append('html content')এবং এটি বিদ্যমান সামগ্রীটি রাখে।

http://api.jquery.com/append/

Answer 6

এমনকি এটি কাজ করবে:

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

Answer 7

আইই 9 + (ভিস্তা +) সমাধান, নতুন পাঠ্য নোড তৈরি না করে:

var div = document.getElementById("divID");
div.textContent += data + " ";

তবে, প্রতিটি বার্তার পরে আমার একটি নতুন লাইনের প্রয়োজন হওয়ায় এটি আমার পক্ষে কৌশলটি পুরোপুরি কার্যকর করতে পারেনি, তাই আমার ডিআইভি এই কোড সহ একটি স্টাইলযুক্ত উলে পরিণত হয়েছে:

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

Https://developer.mozilla.org/en-US/docs/Web/API/ নোড / টেক্সট কনটেন্ট থেকে :

অন্তর্বর্তী এইচটিএমএল থেকে পার্থক্য

ইনটারএইচটিএমএল এইচটিএমএল এর নাম হিসাবে ইঙ্গিত দেয়। বেশিরভাগ ক্ষেত্রে, কোনও উপাদানটির মধ্যে পাঠ্য পুনরুদ্ধার বা লেখার জন্য লোকেরা অভ্যন্তরীণ এইচটিএমএল ব্যবহার করে। পরিবর্তে টেক্সট কনটেন্ট ব্যবহার করা উচিত। কারণ পাঠ্যটি এইচটিএমএল হিসাবে বিশ্লেষণ করা হয়নি, এর আরও ভাল পারফরম্যান্স হওয়ার সম্ভাবনা রয়েছে। তদতিরিক্ত, এটি কোনও এক্সএসএস আক্রমণ ভেক্টর এড়িয়ে চলে ids

Answer 8

আপনি jQuery ব্যবহার করতে পারেন। যা এটি খুব সহজ করে তোলে।

কেবল আপনার এইচটিএমএলে jQuery যুক্ত jQuery ফাইলটি ডাউনলোড করুন
বা আপনি অনলাইন লিংকটি ব্যবহার করতে পারেন:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

এবং এটি চেষ্টা করুন:

 $("#divID").append(data);

Answer 9

নিম্নলিখিত পদ্ধতিটি অন্যদের চেয়ে কম সাধারণ তবে আপনি যখন নিশ্চিত হন যে ডিভের শেষ সন্তানের নোড ইতিমধ্যে একটি পাঠ্য নোড। এমডিএন রেফারেন্স অ্যাপেন্ডডাটা ব্যবহার করে আপনি কোনও নতুন পাঠ্য নোড তৈরি করবেন নাappendData

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;

if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

Answer 10

কেন শুধু সেটএট্রিবিউট ব্যবহার করবেন না?

thisDiv.setAttribute('attrName','data you wish to append');

তারপরে আপনি এই ডেটা পেতে পারেন:

thisDiv.attrName;

Comments

কারণ এর সাথে প্রশ্নের কোন যোগসূত্র নেই?

— ফ্যাজে ইউএনএলপ্লিড আইডেড

Answer 11

জাভা লিপি

document.getElementById("divID").html("this text will be added to div");

jQuery

$("#divID").html("this text will be added to div");

.html()আপনি প্রবেশ করেছেন তা দেখতে কোনও যুক্তি ছাড়াই ব্যবহার করুন । আপনি আপনার কোডে ব্যবহার করার আগে এই ফাংশনগুলি দ্রুত পরীক্ষা করতে ব্রাউজার কনসোলটি ব্যবহার করতে পারেন।

Comments

এটি একে অপরের গৃহীত উত্তরের একটি অনুলিপি। কেন?

— স্টিফেন রাউচ

অভ্যন্তরীণ এইচটিএমএল এবং এইচটিএমএল () আমার প্রকল্পে আলাদাভাবে কাজ করেছে। ইনারএইচটিএমএল এক দৃশ্যে কিছুই করেনি। সুতরাং এটি যুক্ত, যদি এটি অন্য কারও জন্য একই হয়।

— দীপু সাহনী