如何通过jquery将巨大的html数据添加到html页面中的div答案

【问题标题】：How to add huge html data through jquery to a div in html page如何通过jquery将巨大的html数据添加到html页面中的div
【发布时间】：2012-11-21 05:40:34
【问题描述】：

我有以下 html 标记。我想通过 jquery 将此标记添加到母版页（或任何其他 html 页面）。我不想在那个 html 页面的正文中包含这个 html，因为我不想触摸我的母版页。我只想在母版页中添加一个 div，并希望将以下标记附加到该 div。我想通过 jquery 附加这个 html。怎么做？

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

【问题讨论】：

api.jquery.com/html 应该会给你一个好的开始！
InnerHTML 也是一个没有 Jquery 的选项

标签： jquery html

【解决方案1】：

$('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');

【讨论】：

真的..??我们应该从另一个页面引用该 html 吗？我想添加到一个 div。不至于身体。那么$('#mydiv').load('myhtml.html') 会起作用吗？
此解决方案没有任何缺点？
@Mihir 不，我想不到。我想这比将值硬编码到您的页面中要多几毫秒。

【解决方案2】：

试试这样的

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

【讨论】：

如果你的两个页面都是不同的 html 页面而不是尝试 ajax 来做，我的意思是两者都在不同的 dom 中。

【解决方案3】：

最简单的方法：

$('#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>');

太丑了。

【讨论】：

我的上帝...我的标记比这个大很多...我在这里输入的很少..没有更好的解决方案。
好吧，你总是可以附加一个额外的 html 文件。除此之外，我对客户端一无所知。

【解决方案4】：

您可以为此使用 jQuery $.ajax()，如下所示：

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

为了更简单，$(selector).load() 如下：

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

您可以通过在 ajax 页面中指定 div 标记的 id 来更进一步。如果 ajax 页面是一个完整的 html 页面并且您不想在调用页面的正文中注入 html、head 等标签，这将有所帮助。你可以这样做：

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

【讨论】：