How can I Replace DIV Content with another content using AJAX

Question

Please am totally new to AJAX/JQuery but I seriously need this in my Web App. Am trying to Replace a DIV with a new content.

Take for example I have this DIV

<div id="container">Container Contents</div>

I will like to replace the content "Container Contents" with a new content entirely from my Submit form. So that when user click on Submit the result of the form will load into the DIV and replace the existing content and also there should be like a kind of Loading animation to show that something is going on in background.

Sorry that I didn't provide details in code, like I said am new to AJAX/JQUERY. Thanks!!!

Possible duplicate of [Change content of div - jQuery](http://stackoverflow.com/questions/7139208/change-content-of-div-jquery) — Steve, Mar 03 '16 at 08:58
Google it, try something - then ask a question IF what you've tried didn't work. — Novocaine, Mar 03 '16 at 09:14

score 0 · Answer 1 · edited May 23 '17 at 12:08

I guess you are looking for something like this:

<script>
$( "yourDiv" ).html( "<b>Wow!</b> Such excitement..." );
$( "yourDiv b" )
  .append( document.createTextNode( "!!!" ) )
  .css( "color", "red" );
</script>

At the Bottom of the jquery documentation you will find more info about it: jQuery Doc.

I don't know what you want to do with AJAX, are you getting a JSON? If yes, you can just stringify it and append it.

FYI: The counter part in Vanilla JS (plain javascript) would start with something like this:

element.innerHTML = 'new content';

You could also look into this Question: Javascript: How to create new div dynamically, change it, move it, modify it in every way possible? The accepted answer is showing alot of good information.

Regards, Megajin

score 0 · Answer 2 · answered Jan 24 '17 at 09:11

With JQuery you could use .remove() and .append() function.

Try something like this :

$('#formId').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: '/route',
        method: 'post',
        data: $(this).serialize(),

        success: function() {
            $('#elementYouWantRemove').remove();
            $('#whereYouWantAddNewContent').append('<p> New content </p>')
        }
    })
});

score 0 · Answer 3 · edited Aug 21 '17 at 11:55

0

If you want to give it a HTML content or text content I suggest you use something like this:

$("#YourDivIdOrName").html(your content as a string);

but if you want to load the content from another page I suggest you use something like this one:

$("#YourDivIdOrName").load("Your content page url");

edited Aug 21 '17 at 11:55

Clíodhna

818
1
15
29

answered Aug 21 '17 at 11:16

Comtuber

43
6

How can I Replace DIV Content with another content using AJAX

3 Answers3