जावास्क्रिप्ट का उपयोग करने के लिए डेटा कैसे संलग्न करें?

Question

मैं AJAX का उपयोग डेटा को div तत्व में जोड़ने के लिए कर रहा हूं, जहां मैं जावास्क्रिप्ट से div को भरता हूं, मैं div में पाए गए पिछले डेटा को खोए बिना div को नए डेटा को कैसे जोड़ सकता हूं?

Comments

$ (div) .append (डेटा);

— जिमी

@ जिमी दैत्य jquery, इस तरह के एक तुच्छ चीज़ के लिए उपयोग करने की आवश्यकता नहीं है

— Naftali उर्फ ​​नील

@ यकीन है, लेकिन वह भी AJAX का उपयोग कर रहा है, तो jQuery निश्चित रूप से एक अच्छा विचार है!

— अलनीतक

@Alnitak, लेकिन आप कैसे जानते हैं कि ओपी किसी चीज के लिए jQuery का उपयोग कर रहा है?

— नफ्ताली उर्फ ​​नील

@ अलंकृत, jQuery का एकमात्र अजाक्स समाधान नहीं है

— Naftali उर्फ ​​नील

Answer 1

इसे इस्तेमाल करे:

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

div.innerHTML += 'Extra stuff';

Comments

खतरे, रॉबिन्सन! यह HTML जोड़ता है , पाठ नहीं। यदि आपका अतिरिक्त सामान उपयोगकर्ता द्वारा प्रदान किया गया है, तो आपने बस सुरक्षा भेद्यता पेश की है। नीचे दिए गए चंदू के उत्तर का उपयोग करने के लिए बेहतर है।

— डेविड

हाँ, यह एक XSS भेद्यता है । आप नीचे दिए गए उत्तर में वर्णन के अनुसार सामग्री के साथ एक पाठ नोड बनाने से बहुत बेहतर हैं।

— डेविड ने

मामले divमें यह भी काम नहीं करता है कि उपयोगकर्ता श्रवण पाठ के साथ घटना श्रोताओं या इनपुट वाले तत्व शामिल हैं। मैं चंदू द्वारा जवाब देने की सलाह देता हूं ।

— user4642212

यह अनुशंसित नहीं है, देखें कि क्या वंशज के घटना श्रोताओं को नष्ट किए बिना इनर HTML को जोड़ना संभव है?

— बरगी

हां, मैं निश्चित रूप से इसकी सिफारिश नहीं करता हूं क्योंकि यह किसी भी चेकबॉक्स, स्थिति श्रोताओं की स्थिति को नष्ट कर देगा।

— कर्कुला

Answer 2

परिशिष्ट का उपयोग करना:

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

इनर HTML का उपयोग करना: यह दृष्टिकोण सभी श्रोताओं को मौजूदा तत्वों को हटा देगा जैसा कि @BiAiB द्वारा बताया गया है। इसलिए यदि आप इस संस्करण का उपयोग करने की योजना बना रहे हैं तो सावधानी बरतें।

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

Comments

मैं इस पद्धति का उपयोग अपने "विवादास्पद" तत्व के साथ कोणीयजस बाइंडिंग के साथ करता हूं, और सब कुछ सही ढंग से काम करता है!

— 16

वास्तव में स्वीकृत उत्तर होना चाहिए। न केवल एक सुंदर तरीका है, बल्कि इनरएचटीएमएल भी डोम का पुनर्निर्माण करेगा, और यह सिर्फ एक अच्छा समाधान नहीं है। AppendChild () का उपयोग करें।

— जान सेवरे '’

createTextNodeयदि आप HTML लोड कर रहे हैं तो यह बेहतर है, लेकिन काम नहीं करेगा। यदि आप उदाहरण के लिए सूची आइटम जोड़ना चाहते हैं, तो यह काम नहीं करेगा। यह बहुत सीमित है।

— जेक

क्या होगा अगर हम अगले इवेंट में उसी एपेंडेड टेक्स्ट नोड के टेक्स्ट को बदलना चाहते हैं?

— राहुल मिश्रा

Answer 3

इससे सावधान रहें innerHTML, जब आप इसका उपयोग करते हैं तो आप कुछ खो देते हैं:

theDiv.innerHTML += 'content',     

के बराबर है:

theDiv.innerHTML = theDiv.innerHTML + 'content'

जो आपके अंदर के सभी नोड्स को नष्ट कर देगा divऔर नए को फिर से बनाएगा । इसके अंदर के तत्वों के सभी संदर्भ और श्रोता खो जाएंगे ।

यदि आपको उन्हें रखने की आवश्यकता है (जब आपने एक क्लिक हैंडलर संलग्न किया है, उदाहरण के लिए), तो आपको DOM फ़ंक्शंस के साथ नई सामग्री को जोड़ना होगा (appendChild, insertAfter, insertBefore):

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

Comments

हां, लेकिन इससे माता-पिता के अंदर एक अतिरिक्त तलाक हो जाएगा जिसकी जरूरत नहीं है और कुछ सीएसएस शैलियों को गड़बड़ कर सकता है

— Naftali उर्फ ​​नील

@ यह सिर्फ appendChild का उपयोग करने के लिए एक उदाहरण तरीका है। बात यहाँ नहीं है।

— BiiiB

सही तरीके से appendChildकिया गया था @Cybernate

— Naftali उर्फ़ नील

@ नहीं नहीं यह नहीं है। यह सही या गलत नहीं है। यह सिर्फ इस बात पर निर्भर करता है कि ओपी को क्या करने की आवश्यकता है: पाठ, HTML कोड या कुछ और।

— BiAiB

@ यह डेटा को जोड़ने का एक अच्छा तरीका है, और इससे अधिक बहुमुखी है document.createTextNode()।

— अलनीतक

Answer 4

यदि आप इसे तेज़ी से करना चाहते हैं और संदर्भ और श्रोताओं को खोना नहीं चाहते हैं: .insertAdjacentHTML () ;

"यह उस तत्व का पुनर्परिवर्तन नहीं करता है जिस पर इसका उपयोग किया जा रहा है और इस प्रकार यह तत्व के अंदर मौजूद तत्वों को दूषित नहीं करता है । यह, और क्रमांकन के अतिरिक्त चरण से बचने से यह बहुत तेज हो जाता है। प्रत्यक्ष इनर HTML हेरफेर की तुलना में हो जाता है।"

सभी मेनलाइन ब्राउज़रों (IE6 +, FF8 +, All others and Mobile) पर समर्थित: http://caniuse.com/#feat=insertadjacenthtml

उदाहरण के लिए https://developer.mozilla.org/en-US/docs/Web/API/Element/insert.jac.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

IE9 + (Vista +) समाधान, नए पाठ नोड्स बनाए बिना:

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

हालाँकि, यह मेरे लिए काफी मुश्किल नहीं था क्योंकि मुझे प्रत्येक संदेश के बाद एक नई लाइन की आवश्यकता थी, इसलिए मेरा DIV इस कोड के साथ स्टाइल उल में बदल गया:

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/Node/textContent :

आंतरिक HTML से अंतर

जैसा कि इसके नाम से संकेत मिलता है, आंतरिक HTML HTML लौटाता है। अक्सर एक तत्व के भीतर पाठ को पुनः प्राप्त या लिखने के लिए, लोग इनर HTML का उपयोग करते हैं। इसके बजाय textContent का उपयोग किया जाना चाहिए। क्योंकि टेक्स्ट को HTML के रूप में पार्स नहीं किया गया है, इसलिए इसके बेहतर प्रदर्शन की संभावना है। इसके अलावा, यह एक XSS हमले वेक्टर से बचा जाता है।

Answer 8

आप jQuery का उपयोग कर सकते हैं। जो इसे बहुत सरल बनाते हैं।

बस अपने HTML में jQuery फ़ाइल जोड़ें jQuery डाउनलोड करें
या आप ऑनलाइन लिंक उपयोगकर्ता कर सकते हैं:

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

और यह प्रयास करें:

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

Answer 9

निम्नलिखित विधि दूसरों की तुलना में कम सामान्य है, हालांकि यह बहुत अच्छा है जब आप सुनिश्चित हैं कि आपके पिछले बच्चे का नोड पहले से ही एक पाठ नोड है। इस तरह आप MDN संदर्भ परिशिष्ट का उपयोग करके एक नया पाठ नोड नहीं बनाएंगे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

क्योंकि इसका सवाल से कोई लेना-देना नहीं है?

— FaZe Unempl0yedd

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

यह स्वीकृत उत्तर की एक प्रति है। क्यों?

— स्टीफन राउच

इनरएचटीएमएल और एचटीएमएल () मेरे प्रोजेक्ट पर अलग तरह से काम करता है। इनरएचटीएमएल ने एक परिदृश्य में कुछ नहीं किया। इस मामले में, किसी और के लिए भी ऐसा ही है।

— दीपू साहनी