如何通过jquery向html页面中的div添加巨大的html数据

如何通过jquery向html页面中的div添加巨大的html数据,jquery,html,Jquery,Html,我有以下html标记。我想通过jquery将此标记添加到母版页(或任何其他html页面)。我不想在html页面的主体中包含这个html,因为我不想触摸我的母版页。我只想在母版页中添加一个div,并想将以下标记附加到该div中。怎么做 <div id="mymenuDiv"> <ul id="nav"> <li class="top"><a href="#nogo1" class="top_link"><span

我有以下html标记。我想通过jquery将此标记添加到母版页(或任何其他html页面)。我不想在html页面的主体中包含这个html,因为我不想触摸我的母版页。我只想在母版页中添加一个div,并想将以下标记附加到该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>

最简单的方法:

$('#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>');
$('myMenuDiv').html('ul id=“nav”>

  • 很难看。

    试试这样的东西

     $(function() {
       $(#master page div id).append($(#id of div from which you have to append));
     });
    
    您可以使用jQuery进行此操作,如下所示:

    $.ajax({
        url: 'ajax/test.html',
        success: function(data) {
          $('#mydiv').html(data);
        }
    });
    
    为了使这一点更加简单,有如下几种方法:

    通过从ajax页面指定
    div
    标记的
    id
    ,您可以更进一步。如果ajax页面是一个完整的html页面,并且您不想在调用页面的主体中插入
    html
    head
    等标记,那么这将很有帮助。您可以这样做:

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

    应该给你一个好的开始!InnerHTML也是一个没有JqueryMy god的选项。。。我有比这更大的加价。。。我刚进入这里。。没有更好的解决方案。好吧,你总是可以附加一个额外的html文件。除此之外,我对客户端一无所知。真的吗。。??我们可以从另一页引用html吗?我想添加到一个div,而不是body。然后
    $('#mydiv').load('myhtml.html')
    会起作用吗?这个解决方案没有任何缺点吗?@Mihir-Nope,我想不出来。我想,这比将值硬编码到页面中需要几毫秒的时间。如果两个页面都是不同的html页面,而不是尝试使用ajax,那么我的意思是,这两个页面都位于不同的dom中。
    $.ajax({
        url: 'ajax/test.html',
        success: function(data) {
          $('#mydiv').html(data);
        }
    });
    
    $('#mydiv').load('ajax/test.html')
    
    $('#mydiv').load('ajax/test.html #div_tag_to_load')