使用.replaceWith() jQuery

Question

我有一个包含以下元素的div：

<div id = "menu">

                <a>Elemento1</a><br/>

                <a>Elemento2</a><br/>

                <a>Elemento3</a><br/>

</div>  

每次单击其中一个元素时，我希望在该列表旁边添加一个具有不同内容的新div，这取决于所单击的元素，它应该添加一个不同的列表。我是web开发的新手，我发现使用jQuery函数.replaceWith()可以做到这一点，但是有没有什么方法可以使用这个函数，添加我在其他.html文件中获得的div？

谢谢!

Answer 1

要获取另一个超文本标记语言文件的某一部分，请使用jQuery load函数。在您的情况下，基本用法是：

$('#result').load('ajax/test.html #container_you_want_to_load');

要在链接之后或之前添加元素，您有几个选择。问题是你是否真的需要它。也许定义一个目标div就足够了，您可以将内容加载到其中。在这种情况下，上面的例子非常适合。

但是，如果您想在<a>标记旁边添加元素，请考虑使用after或before jQuery函数。

要想在某个链接上点击一次，请检查click

Answer 2

为什么不在菜单之后使用<div id="content"></div>，然后使用

$("#content").load("your_file.html");

Answer 3

replaceWith用于用不同的DOM元素替换某些DOM元素。我不认为这个函数能解决这个问题。

您可以使用.load函数来获取html文件内容，并将其插入到您想要插入的任何位置。只需将单击事件绑定到每个链接，并使用它们的href属性来获取相应的文件。别忘了在事件结束时用返回false。

如下所示：

<div id="menu">
     <a href="page1.html">Elemento1</a>
     <a href="page2.html">Elemento2</a>
     <a href="page3.html">Elemento3</a>
</div>
<div id="content"></div>

$("#menu a").click(function(){
   $("#content").load(this.href);
   return false;
});