Как вставить файл макета html в div?

Question

Так что прямо сейчас у меня есть всплывающее div (это для расширения chrome), и сейчас div всплывает просто отлично.

Что бы я хотел сделать, это ввести этот файл макета, который я создал (много частей, детали которого были битти), в div. Как бы я это сделал. Я попытался установить свойство innerHTML в index.html (файл макета)

jQuery(function($) { 
    // Mouse listener for any move event on the current document. 

    console.log("started"); //debug for starting 
    var popupStatus = 0; // set value 

    document.addEventListener('mousemove', function (e) { 
    var srcElement = e.srcElement; 
    // Lets check if our underlying element is a DIV. 
    if (srcElement.nodeName == 'A' || srcElement.nodeName == 'STRONG') { 
     loadPopup(); 
    } 
    else{ 
     disablePopup(); 
    } 
    }, true); 

    function loadPopup() { 
    var x = document.getElementById("index"); 
    if(popupStatus == 0) { // if value is 0, show popup 
     $('<div/>', { 
     id: 'cover', 
     innerHTML: index.html //line in question (making it "index.html" doesn't work) 
     }).appendTo(document.documentElement); 
     $('#cover').fadeTo("slow",1); 
     popupStatus = 1; // and set value to 1 
    } 
    } 

    function disablePopup() { 
    if(popupStatus == 1) { // if value is 1, close popup 
     $('#cover').fadeTo("slow",0); 
     $('#cover').remove(); 
     popupStatus = 0; 
    } 
    } 
}); 

Answer 1

Может быть, вы могли бы использовать Ajax, чтобы получить содержимое файла «index.html».

сниппета, как это:

$.get("index.html", function(data) { 
    $.('body').append('<div id="cover">' + data + '</div>'); 
}); 

могут быть размещены на рассматриваемой линии. Замените «тело» тем, что вам подходит. Фрагмент может быть определенно улучшен, но на данный момент он должен дать вам представление.

Я не знаю других возможностей для чтения файлов с JavaScript на стороне клиента.

Или теперь я вижу, лучше сделать это:

$.get("index.html", function(data) { 
    $('<div/>', { 
     id: 'cover', 
     innerHTML: data 
    }).appendTo(document.documentElement); 
}); 

в if-состоянии.

Я не совсем уверен, что вы хотите сделать, но кажется, что вы хотите добавить его к элементу с индексом ID. Чем вы должны соответствующим образом изменить это в последней строке.

EDIT:

Вот некоторые незначительные изменения:

$.get("index.html", function(data) { 
    $('<div/>', { 
     id: 'cover', 
     html: data // this was making the problem 
    }).appendTo(x); // append to the element saved in the variable x 
}, "html"); // state explicitly that the payload of data is HTML 

, которые делают сниппет работает для меня.