Using .html() to replace text in a <div>

Question

I have been searching all over for an answer to this and nothing seems to be relevant. Sorry if there is another similar question.

I am trying to put multiple pages on to just an index.html page, and therefore am trying to make clicking on a menu button replace text within my content div.

I have tried using .replaceWith(); .empty() and append() (and .appendTo() ), and have found that the following works, but only once. I am quite new to coding and therefore any responses in Laymans terms would be greatly appreciated. :)

My HTML: ......

<div id="menubar">
            <ul>
            <a href="index.html"><h6>Home</h6><a/>
            <h6 id="buildServ">Building Services</h6>
            <h6 id="maintServ">Maintenance and Handyman Services</h6>
            <h6>Garden Services</h6>
            <h6>Gallery</h6>
            <h6>Contact Me</h6>
            </ul>
</div>
<div id="content" style="padding:10px;marginleft:50px;width:40%;height:auto;float:left;border:3px solid white;border-radius:15px;background-image:url('menuGrad.jpg');background-repeat:repeat-x;behavior: url('PIE.htc');">

            <div id="textDiv">
                <p>this is where the homepage text will go</p>
        </div><!-- textDiv -->

            <div id="textDiv2" style="display:none;">
                <p>this is where the building services text will go</p>
            </div><!-- textDiv2 -->

                <div id="textDiv3" style="display:none;">
                    <p>this is where maintenance services text will go</p>
                </div><!-- textDiv3 -->

        </div><!-- content -->

and the jQuery: ...

                    <script>
        $("#buildServ").click(function(){
            $("#content").html($("#textDiv2"));
            $("#textDiv2").show();
            });
        $("#maintServ").click(function(){
            $("#content").html($("#textDiv3"));
            $("#textDiv3").show();
            });

        </script>

Once I have clicked on #buildServ it works, but then I click #maintServ and try to go back to #buildserv and it clears the #content .

Hope this is clear, if any other info is required to assist please let me know.

api.jquery.com/html

Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar

2013-08-22 16:10:21 +00:00
Commented Aug 22, 2013 at 16:10 — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Aug 22, 2013 at 16:10

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-22 16:09:12Z

1

The problem is that you assign only the instance not the html of the div

try to change this:

       $("#buildServ").click(function(){
            $("#content").html($("#textDiv2"));
            $("#textDiv2").show();
            });
        $("#maintServ").click(function(){
            $("#content").html($("#textDiv3"));
            $("#textDiv3").show();
            });

to this:

   $("#buildServ").click(function(){
        $("#content").html($("#textDiv2").html());
        $("#textDiv2").show();
        });
    $("#maintServ").click(function(){
        $("#content").html($("#textDiv3").html());
        $("#textDiv3").show();
        });

The problem is that isn't correct this methd, I suggest you to copy the div #textDiv2 and #textDiv3 assign another id and after insert it into your div because in this way you can have multiple div with same id

edited Aug 22, 2013 at 16:09

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

answered Aug 22, 2013 at 16:07

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sergio Over a year ago

Will this work? if you replace the html of #content, there will be no #textDiv2, #textDiv3, etc

colestrode Over a year ago

@Sergio is right, this will only work once. After that textDiv2, textDiv3 will be replaced

Alessandro Minoccheri Over a year ago

I have write that isn't the crrect way to make this logic! I have only answer to the OP question isn't necessary to downvote I think but... @Sergio

Sergio Over a year ago

@AlessandroMinoccheri, OP complains it only work on first click, not second. Does your answer work after first click ?

Thomas Hodge Over a year ago

thanks for the responses, however I have completely changed this now and am using a jquery ui tabs system instead.

Sergio · Accepted Answer · 2013-08-22 16:16:11Z

1

I think you could just show/hide your divs...

Like:

$("#buildServ").click(function () {
    $("#content > div").hide()
    $("#textDiv2").show();
});
$("#maintServ").click(function () {
    $("#content > div").hide()
    $("#textDiv3").show();
});

The problem with your code is that the hidden divs are inside the #content div and you are replacing that html. So when you do $("#content").html($("#textDiv3")); all other divs inside content disappear and you cannot get them back to other clicks.

edited Aug 22, 2013 at 16:16

answered Aug 22, 2013 at 16:09

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

1 Comment

colestrode Over a year ago

This is the best approach of the answers here

Arun P Johny · Accepted Answer · 2013-08-22 16:16:54Z

1

There is no need to write handler for each item

$textDivs = $('#content > div')
$("#menubar ul > *").click(function(){
    $textDivs.hide();
    $textDivs.eq($(this).index()).show();
    return false;
});

Demo: Fiddle

answered Aug 22, 2013 at 16:16

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

Sergio Over a year ago

+1 to this. OP should keep in mind the order and quantity of the menu links must be the same as the divs.

Arun P Johny Over a year ago

@Sergio yes... it is based on index

Thomas Hodge Over a year ago

Thank you for this, works great, however I am now using a jquery ui tabs system instead, due to needs of the client. :)

Community · Accepted Answer · 2017-05-23 12:21:30Z

0

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               $('#selectedTarget').load('includes/contentSnippet.html');
           });
        </script>   
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

JQuery: replace DIV contents with html from an external file. Full example?

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Aug 22, 2013 at 16:08

Navin Nair Kottayil

5638 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using .html() to replace text in a <div>

4 Answers 4

5 Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related