將HTML數據從另一個文件附加到div

-3

我想從外部文件將HTML-Blocks附加到我的網站中。該文件位於我的服務器上，幷包含列表條目的藍圖。當用戶搜索某些內容時，結果應該附加一個循環，並用來自外部HTML文件的代碼顯示。將HTML數據從另一個文件附加到div

這是我的頁面的結構：

主要頁面

<div id="content"> 
    // Display List elements here 
<div>

我的jQuery代碼

$.('#search-btn').click(function(){ 
    getElements(); 
}); 

function getElements(){ 
    // Getting elements from server and saving the in the variable data 
    for(var i = 0; i < data.length; i++){ 
    // Append the Elements to the div with id="content" 
    } 
}

藍圖的元素，不同勢HTML文件

<div class="element"> 
    <p class="show_name"></p> 
    <p class="show_email"></p> 
    <p class="show_birthday"></p> 
</div>

所以，我需要將多個藍圖追加到主頁的content-div。關於如何使用JQuery實現這個任何想法？ :)

來源

2017-08-02 mfaorlkzus

你看看jQuery.ajax嗎？ –

like @LS_ᴅᴇᴠ表示使用ajax會做的伎倆，你可以將HTML追加到div。 –

我會使用Angular代替，並使用routeProvider將內容注入頁面上的div –

嘗試這種解決方案

function getElements(){ 
    var div = $('#content'); 
    // Getting elements from server and saving the in the variable data 
    $.get("/url/to/file.html", function(response) { 
    for(var i = 0; i < data.length; i++){ 
     div.append($(response)); 
    } 

    }); 
}

來源

2017-08-02 13:11:54 MysterX

我做到了，但沒有任何反應，我不知道如何指定路徑。現在我正在使用「$ .get（」../../views/partials/list_element.ejs「，function ...」但我沒有加載文件 – mfaorlkzus

HTML文件必須可以從網絡獲得。需要配置您的Web服務器以允許通過某個路徑訪問該文件，然後您可以使用該路徑通過jQuery加載文件 – MysterX

那麼，該文件在服務器上，但我不明白爲什麼您需要執行http get request to get it。應用程序運行在Node JS服務器上，所以我必須爲我想要包含到我的網站的每個元素創建路由！？ – mfaorlkzus

創建使用類名稱 '主要' 主DIV，你可以使用此代碼：

function getElements() { 
    for(var i = 0; i < data.length; i++){ 
     $(".main").append("<div class='content'><div class='show_name'>"+data.value1+"</div><div class='show_email'>"+data.value2+"</div><div class='show_birthday'>"+data.value3+"</div></div>"); 
    } 
}

來源

2017-08-02 13:35:12

但它不是很乾淨呃如果將設計導出爲不同的HTML文件，而不是在JQuery函數中生成HTML？ – mfaorlkzus

嘗試以下：

function getElements1(){ 
    var data = ['a', 'b', 'c']; 
    // Getting elements from server and saving the in the variable data 
    for(var i = 0; i < data.length; i++){ 
    // Append the Elements to the div with id="content" 
    $('#content').append(data[i]); 
    } 
} 
$('#search-btn').click(function(){ 
    getElements1(); 
});

查看工作代碼：https://jsfiddle.net/9p77afc3/12/

來源

2017-08-02 13:38:29

將HTML數據從另一個文件附加到div

回答

相關問題