Javascript 用div动态替换div的问题

我已经创建了一个html页面（如果您愿意的话，可以使用模板），所以我想做的是让页面完全独立，并使用AJAX/jQuery将div元素与其他外部html页面一起传播

这可能吗

我一直在四处查看，还没有找到解决办法

这是我的导航列表的一个片段

<div>
  <ul>
     <li id="n-c"><span class="dir">Cosmo</span>
        <ul id="switcheroo">
            <li class="first"><a href="pg1.html">Special</a></li>
            <li><a href="pg2.html">Mineral</a></li>
            <li><a href="pg3.html">Lateral</a></li>
            <li><a href="pg4.html">Tangent</a></li>
        </ul>
     </li>
  </ul>
</div>

没用，有人能帮我吗

WDH

---

---

最后，我用最简单的形式实现了我的结果

<script type="text/javascript">

    $(document).ready(function() {
       $("#switcheroo").click(function(event){
           $('#contentSwap2').load('pg2.html');
       }); 
    });

    $(document).ready(function() {
       $("#switcheroo2").click(function(event){
           $('#contentSwap3').load('pg3.html');
       }); 
    });

</script>


                   ... and so on ...

$（文档）.ready（函数（）{
$（“#switcheroo”）。单击（函数（事件）{
$（'#contentSwap2'）.load（'pg2.html'）；
}); 
});
$（文档）.ready（函数（）{
$（“#switcheroo2”）。单击（函数（事件）{
$（'#contentSwap3'）.load（'pg3.html'）；
}); 
});
... 等等

---

并最终将div id与已有内容的div id交换，而不是使用空标记

WDH

---

感谢您对@abdullah.abcoder@shankarsangli和@John Hartsock的所有见解假定您的数据是HTML，那么您可以使用jQuery执行以下操作：

此外，您可能只希望通过执行以下操作从数据中导入HTML部分：

$('#contentSwap').replaceWith($('#somedivElement', data));

---

我希望这能起作用

当您在get回调中得到html响应时，它将包含所有以html开头的标记，头体等。您必须确保只从服务器发送所需的标记，或者解析标记，并仅获取要附加到contentSwapdiv中的标记

另一种方法是使用iframe，将iframe源设置为href，onload of iframe查找所需元素，获取标记，然后将其附加到contentSwapdiv

$("ul #switcheroo li a").click(function(event) {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  var dIf = $("#dummyIframe");

if(dIf.length == 0){
    $(document.body).append('<iframe id="dummyIframe" style="display:none;"></iframe>');
     dIf = $("#dummyIframe").onload(function(){
        var iFrameContent = $("#dummyIframe").contents();
        $('#contentSwap', window.parent.document)
        .html(iFrameContent.find('#someDivIdOrAnyOtherSelector').html());
      });
 }
 dIf[0].src = href;

      event.preventDefault();
      return false;
    });

$（“ul#switcheroo li a”）。单击（功能（事件）{
var$parent=$（this.parent（）；
$parent.addClass（“选定”）.sides（）.removeClass（“选定”）；
var href=$（this.attr（'href'）；
var dIf=$（“dummyIframe”）；
如果（dIf.length==0）{
$（document.body）.append（“”）；
dIf=$（“#dummyIframe”）.onload（函数（）{
var iFrameContent=$（“#dummyIframe”）.contents（）；
$（'#contentSwap'，window.parent.document）
.html（iFrameContent.find（'#someDivIdOrAnyOtherSelector'）.html（）；
});
}
dIf[0].src=href；
event.preventDefault（）；
返回false；
});

好的，我尝试了这个方法，它的作用是在同一个窗口中打开链接的html页面。绕过仅使用div开关的原始目标。@WebDevHed检查此解决方案的结果与上面的注释相同。@WebDevHed。。。实际上，我并不是在提供一个直接的解决方案，而是关于如何解决您的问题的想法。由于我不知道你的最终结果，我很难帮助你。也许您可以在jsfiddle.net上模拟一个示例场景

$('#contentSwap').replaceWith(data);

$('#contentSwap').replaceWith($('#somedivElement', data));

$("ul #switcheroo li a").click(function(event) {
    var $parent = $(this).parent();
    $parent.addClass("selected").siblings().removeClass("selected");
    var href = $(this).attr('href');
    $('#contentSwap').load('' + href + ''); //$('#contentSwap').empty().load(''+ href +''); you may use this for make your `#contantSwap` empty and then append contents to it
    event.preventDefault();
    return false;
});

$("ul #switcheroo li a").click(function(event) {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  var dIf = $("#dummyIframe");

if(dIf.length == 0){
    $(document.body).append('<iframe id="dummyIframe" style="display:none;"></iframe>');
     dIf = $("#dummyIframe").onload(function(){
        var iFrameContent = $("#dummyIframe").contents();
        $('#contentSwap', window.parent.document)
        .html(iFrameContent.find('#someDivIdOrAnyOtherSelector').html());
      });
 }
 dIf[0].src = href;

      event.preventDefault();
      return false;
    });