innerHTML बजाय

Question

की जगह संलग्न मैं एक AJAX अनुरोध

var xmlhttp; 
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp = new XMLHttpRequest(); 
} else { // code for IE6, IE5 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     document.getElementById("some_id").innerHTML += xmlhttp.responseText; 
    } 
} 
xmlhttp.open("GET", "http://example.com/"); 
xmlhttp.setRequestHeader('Content-Type', 'utf8'); 
xmlhttp.send(); 

सब कुछ ठीक काम करता है के साथ एक div अद्यतन करने के लिए इस कोड का उपयोग कर रहा है, समस्या यह है कि जब आईडी some_id साथ div उस में सामग्री का एक बहुत कुछ है मैं सामग्री गायब हो रहा हूं और फिर AJAX अनुरोध निष्पादित होने के बाद अद्यतन दिख रहा हूं।

मुझे लगता है कि यह क्योंकि

document.getElementById("some_id").innerHTML += xmlhttp.responseText; 

को हटाने और पिछले innerHTML प्लस नई सामग्री के साथ div की innerHTML की जगह, एक previous content → blank → updated content व्यवहार में परिणित कर रहा है।

div पर नई सामग्री को अपनी पूरी सामग्री को बदलने के बजाय नई सामग्री को जोड़ने का कोई तरीका है? आप (जो संभावना लगती है) केवल HTML के स्ट्रिंग है, तो

document.getElementById("some_id").appendChild(xmlhttp.responseText); 

, तो:,

var newElement = document.createElement('div'); 
newElement.innerHTML = xmlhttp.responseText; 
document.getElementById("some_id").appendChild(newElement); 

दूसरी ओर यदि आप संलग्न करना होगा

Answer 1

कि htmlhttp.responseText मान लिया जाये कि एक नोड है एक स्ट्रिंग से नए तत्व:

// getting a reference to the relevant element we're adding to: 
var container = document.getElementById("some_id"), 
    // creating a new element to contain the 'xmlhttp.responseText' 
    newElement = document.createElement('div'); 
// setting the innerHTML of the 'newElement' to whatever 'xmlhttp.responseText' is: 
newElement.innerHTML = xmlhttp.responseText; 

/* (repeatedly) removing the firstChild, and appending it to the 'container', 
    of the 'newElement' until it's empty: */ 
while (newElement.firstChild) { 
    container.appendChild(newElement.firstChild); 
} 
// removing the now empty 'newElement': 
newElement.parentNode.removeChild(newElement); 

संदर्भ:

• Node.appendChild()।

Answer 2

old_html = document.getElementById("some_id").innerHTML; 
document.getElementById("some_id").innerHTML = old_html+xmlhttp.responseText; 

Answer 3

आप Element.insertAdjacentHTML() इस्तेमाल कर सकते हैं।

insertAdjacentHTML() एक निर्दिष्ट स्थान पर HTML या XML और आवेषण डोम पेड़ में जिसके परिणामस्वरूप नोड्स के रूप में निर्दिष्ट पाठ पार्स करता है। यह उस तत्व का पुन: विश्लेषण नहीं करता है जिसका उपयोग किया जा रहा है और इस प्रकार यह तत्व के अंदर मौजूद मौजूदा तत्वों को भ्रष्ट नहीं करता है। यह, और धारावाहिकता के अतिरिक्त चरण से बचने से प्रत्यक्ष आंतरिक HTML मैनिपुलेशन की तुलना में यह बहुत तेज़ हो जाता है।

मुझे लगता है कि आप

const div = document.getElementById("some_id"); 
div.insertAdjacentHTML('beforeend', xmlhttp.responseText);;