Jump to content
iwato

How to Replace an Insert from Another Insert

Recommended Posts

DILEMMA:  Visitors to the mainpage of my website can fill the middle section of the page from the page's navigation bar in either of two ways.  Both ways employ Javascript:  one, copy a div already on the page into another div on the same page; and two, copy the contents of a div on a another page into same.  What I would like to do now is to copy the contents of a div already on the page with a call from the contents of a div that was previously on another page. 

QUESTION: How does one get a div to replace its own content when the div whose contents needs to be replaced has been filled with content from another page?

Roddy

 

Share this post


Link to post
Share on other sites

I don't understand the question.  Replacing the contents of any element on the page is the same regardless of the content you're replacing it with.  Methods of replacing content in an element do not change based on the content.  I don't know if you're referring to appending content instead of replacing. 

  • Like 1

Share this post


Link to post
Share on other sites

OK.  Let us assume that how the content was inserted and the content itself do not matter.  How does one go about replacing the content of a div from inside the div whose content is to be replaced?  This should be a much easier question to understand.

Roddy

Edited by iwato

Share this post


Link to post
Share on other sites

I'm not sure what "from inside the div" means. Does that mean that the script that's doing the replacement is inside the div?

As far as replacing the content of any element, you can either set its innerHTML property or use DOM methods such as removeChild() and appendChild().

  • Like 1

Share this post


Link to post
Share on other sites

OK, Team, your confusion helped me to unravel my own confusion, and I was able to achieve the task with overwhelming success.

SUCCESS:  The following code replaces the current content of <div id='main'> with the content of another called <div id='legal_div'>.  It also propels the user to the top of the hosting div -- namely, <div id='main'> after the new content is in place.  This task is achieved with a Javascript file that was imported when the old content was set.  My confusion was three-fold:

1) how to select the #main div

2) where to place the Javascript, and

3) how to select the <h2> element called #data_analysis

$("#make_invisible").click(function() {
    var replacement = $("#legal_div").html();
    $("#main").html(replacement);
    $('body, html').animate({scrollTop: $('#main').find('#data_analysis').offset().top},800);
});

In any case, the problem is now resolved.

Roddy

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×