'Append external file to head

I'm trying to load a file into the head… but also keep what is currently in the head.

At the moment… the file loads into the head, but it removes the title before doing so.

How do I keep the title in the head and load the file at the same time.

$('head').load('../../external_file.html');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <title>Home</title>
  <!-- External File goes here -->
  <!-- I want the title to stay -->
</head>

javascript jquery

Solution 1:^[1]

I am not sure why you are trying to insert HTML file in the head, but try this anyway.

put your jquery.min.js in the footer or in the bottom part of your html not above the head.
you can do it via ajax(i am assume that your trying to spit out html element inside your external html file to head).

(function(){ $.ajax({ url : "../../external_file.html", type: "GET", dataType: "html", success : function (data) { $(data).appendTo('head'); } }); })(); this will make an ajax request and return what ever the content of your html file and append to your head.

:update:

okay please follow this:

all of your script away from head(for standard) put it somewhere bellow the your html file.
take away my code from .ajaxComplete(you dont need it anyway the ajaxComplete);

put your $('.click_explore').click() inside success function inside my code. because the current structure that causes the loop.

    (function(){
    $.ajax({
        url : "../../external_file.html",
        type: "GET",
        dataType: "html",
        success : function (data) {
            $(data).appendTo('head');
            $(".click_explore").click(function() {
                $('body').animate({
                    scrollTop: $(".scroll_to_me").offset().top - 100
                }, 500);
                return false;
            });

        }
    });
})();

I hope this help.

Solution 2:^[2]

Use $.get() instead of $.load() this will return the contents of the file and you can add the contents to the end of the element from there.

Below is a rough example:

$.get('../../external_file.html', function(response) {
        $('head').append(response);
});

Solution 3:^[3]

I think load is a shortcut to entirely replace the html content, so if you want to keep the title, you will need to use a few more lines.

You could track the title and add it back after load:

var title = $('head title').text();
$('head').load('../../external_file.html');
$('head').prepend('<title>' + title + '</title>');

Or you could append the new content to what's there.

$.get('../../external_file.html', function(data) {
    // add error handling
    $('head').append(data);
});

Solution 4:^[4]

USING PLAIN JAVASCRIPT (JS VANILLA)

var ajax = new XMLHttpRequest();
ajax.open("GET", "/yourpath/toyourfile.html", true);
ajaxInicial.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', this.responseText);}}
ajaxInicial.send();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	arbuthnott
Solution 4	Devmyselz

'Append external file to head

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]