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

Question

Welcome To Ask or Share your Answers For Others

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

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

Question

What's the full code to enable jQuery on a page and then use it to replace the contents of a DIV with HTML text from an external file?

Background

I'm brand new to jQuery and I'm eager to work with it so I can learn it. I have a site where I need to replace the contents of the same div (a footer) that exists on every page. Fortunately, each of these pages already imports the same header file. So I'm going to modify that header file with some jQuery magic! I'm having trouble finding full examples and I figured other's might have similar questions. Who better to ask than the SO gurus?

Example

Given a basic HTML file Example.html:

<html>
    <head>
    </head>
    <body>
        <div id="selectedTarget">
            Existing content.
        </div>
    </body>
</html>

And an external file includes/contentSnippet.html containing a snippet of html:

<p>
    Hello World!
</p>

What would the new Example.htmlfile be that would link the proper jQuery libraries (from the ./js directory) and replace the div's contents via jQuery?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-17T02:58:04+0000

ok, I'll bite...

<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>

Notes:

I've linked the jquery libraries directly from jQuery's public CDN (which is allowed and encouraged)
You can find the documentation for jQuery's load() function right here.

Categories

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

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

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags