Question

148

InnerHTML append instead of replacing

rated 0 times [ 154] [ 6] / answers: 1 / hits: 45779 / 11 Years ago, fri, august 30, 2013, 12:00:00

I'm using this code to update a div with an AJAX request

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();

Everything works fine, the problem is that when the div with id some_id has a lot of content in it i can see the content disappearing and then appearing updated after the AJAX request has been executed.

I think that it's because

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

Is deleting and replacing the innerHTML of the div with the previous innerHTML plus the new content, resulting in a previous content → blank → updated content behaviour.

Is there a way to append the new content to the div instead of replacing its whole content with the new one?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

aileent questions

1 Next.js, getStaticProps not working with component but does with page

Tue, Mar 1, 22, 00:00, 2 Years ago

1 Why am I getting Failed to load extension. Invalid value for 'content_security_policy'?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 Laravel livewire model is not working when updating input field from javascript?

Sun, Nov 29, 20, 00:00, 4 Years ago

1 How to get Input field type as props in react typescript

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Native Render error missing semicolon

Fri, May 8, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ibrahimgilbertoz · Accepted Answer

Assuming that htmlhttp.responseText is a node:

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

If you have only a string of HTML (which seems likely), then:

var newElement = document.createElement('div');

newElement.innerHTML = xmlhttp.responseText;

document.getElementById(some_id).appendChild(newElement);

On the other hand, if you must append new elements from a string:

// 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);

References:

Node.appendChild().