如何通過jquery添加大量html數據到html頁面的div

我有以下的html標記。我想通過jQuery將這個標記添加到母版頁（或任何其他HTML頁面）。我不想在html頁面的主體中包含這個html，因爲我不想觸摸我的母版頁。我只想在主頁面中添加一個div，並且想要將下面的標記附加到該div。我想通過jquery追加這個html。怎麼做？如何通過jquery添加大量html數據到html頁面的div

<div id="mymenuDiv"> 
    <ul id="nav"> 
     <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li> 
     <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a> 
      <ul class="sub"> 
       <li><a href="#nogo3" class="fly">Cameras</a> 
         <ul> 
          <li><a href="#nogo4">Nikon</a></li> 
          <li><a href="#nogo5">Minolta</a></li> 
          <li><a href="#nogo6">Pentax</a></li> 
         </ul> 
       </li> 
       <li class="mid"><a href="#nogo7" class="fly">Lenses</a> 
         <ul> 
          <li><a href="#nogo8">Wide Angle</a></li> 
          <li><a href="#nogo9">Standard</a></li> 
          <li><a href="#nogo10">Telephoto</a></li> 
          <li><a href="#nogo11" class="fly">Zoom</a> 
          </li> 
          <li><a href="#nogo15">Mirror</a></li> 
         </ul> 
       </li> 
       <li><a href="#nogo19">Flash Guns</a></li> 
       <li><a href="#nogo20">Tripods</a></li> 
       <li><a href="#nogo21">Filters</a></li> 
      </ul> 
     </li> 
    </ul> 
    </div>

來源

2012-11-21 Mihir

http://api.jquery.com/html/應該給你一個很好的開始！ –

InnerHTML也是一個沒有Jquery的選項 –

$('body').append("<div id=\"mymenuDiv\">\r\n <ul id=\"nav\">\r\n  <li class=\"top\"><a href=\"#nogo1\" class=\"top_link\"><span>Home<\/span><\/a><\/li>\r\n  <li class=\"top\"><a href=\"#nogo2\" id=\"products\" class=\"top_link\"><span class=\"down\">Products<\/span><\/a>\r\n   <ul class=\"sub\">\r\n    <li><a href=\"#nogo3\" class=\"fly\">Cameras<\/a>\r\n      <ul>\r\n       <li><a href=\"#nogo4\">Nikon<\/a><\/li>\r\n       <li><a href=\"#nogo5\">Minolta<\/a><\/li>\r\n       <li><a href=\"#nogo6\">Pentax<\/a><\/li>\r\n      <\/ul>\r\n    <\/li>\r\n    <li class=\"mid\"><a href=\"#nogo7\" class=\"fly\">Lenses<\/a>\r\n      <ul>\r\n       <li><a href=\"#nogo8\">Wide Angle<\/a><\/li>\r\n       <li><a href=\"#nogo9\">Standard<\/a><\/li>\r\n       <li><a href=\"#nogo10\">Telephoto<\/a><\/li>\r\n       <li><a href=\"#nogo11\" class=\"fly\">Zoom<\/a>\r\n       <\/li>\r\n       <li><a href=\"#nogo15\">Mirror<\/a><\/li>\r\n      <\/ul>\r\n    <\/li>\r\n    <li><a href=\"#nogo19\">Flash Guns<\/a><\/li>\r\n    <li><a href=\"#nogo20\">Tripods<\/a><\/li>\r\n    <li><a href=\"#nogo21\">Filters<\/a><\/li>\r\n   <\/ul>\r\n  <\/li>\r\n <\/ul>\r\n <\/div>")

更重要的是，堅持在一個HTML文件，並做到這一點：

$('body').load('myhtml.html');

來源

2012-11-21 05:44:16

真的.. ??我們應該從另一個頁面引用這個html嗎？我想添加到一個div。不要身體。那麼'$（'＃mydiv'）.load（'myhtml.html'）'會工作嗎？ – Mihir

@Mhhir是的，這也適用。 –

該解決方案沒有任何缺點？ – Mihir

最簡單的方法：

$('#myMenuDiv').html('<ul id="nav"><li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li><li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a><ul class="sub"><li><a href="#nogo3" class="fly">Cameras</a><ul><li><a href="#nogo4">Nikon</a></li><li><a href="#nogo5">Minolta</a></li><li><a href="#nogo6">Pentax</a></li></ul></li><li class="mid"><a href="#nogo7" class="fly">Lenses</a><ul><li><a href="#nogo8">Wide Angle</a></li><li><a href="#nogo9">Standard</a></li><li><a href="#nogo10">Telephoto</a></li><li><a href="#nogo11" class="fly">Zoom</a></li><li><a href="#nogo15">Mirror</a></li></ul></li><li><a href="#nogo19">Flash Guns</a></li><li><a href="#nogo20">Tripods</a></li><li><a href="#nogo21">Filters</a></li></ul></li></ul>');

這是醜陋的。

來源

2012-11-21 05:44:33 jpumford

不會工作，你需要逃避換行等 –

我的上帝......我有非常大的標記比這...我剛剛進入這裏..沒有任何更好的解決方案。 – Mihir

那麼，你總是可以附加一個額外的HTML文件。除此之外，我不知道客戶端。 – jpumford

嘗試這樣的事情

$(function() { 
    $(#master page div id).append($(#id of div from which you have to append)); 
});

來源

2012-11-21 05:46:18

這不起作用。已經嘗試過這一個 – Mihir

如果你的頁面是不同的HTML頁面而不是嘗試Ajax來做到這一點，我的意思是兩者都在不同的DOM。 –

您可以使用jQuery $.ajax()這一點，就像這樣：

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
     $('#mydiv').html(data); 
    } 
});

爲了使這個就更簡單了，有$(selector).load()就像這樣：

$('#mydiv').load('ajax/test.html')

您可以通過指定id從ajax頁面的div標記。如果ajax頁面是完整的html頁面，並且您不想在呼叫頁面的主體中注入html，head等標籤，這將有所幫助。你可以這樣做：

$('#mydiv').load('ajax/test.html #div_tag_to_load')

來源

2012-11-21 07:08:01 Abhilash

如何通過jquery添加大量html數據到html頁面的div

回答

相關問題