使用.replaceWith()jQuery

时间:2013-02-19 18:41:42

标签: javascript jquery html

我有一个包含这些元素的div:

<div id = "menu">

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

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

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

</div>  

每次单击其中一个元素时,我希望在此列表旁边添加一个具有不同内容的新div,具体取决于单击的元素,它应添加不同的列表。我是网络开发的新手,我发现使用jQuery函数.replaceWith()可能会这样做,但有没有办法可以使用这个函数,添加我在其他.html文件中的div?

谢谢!

3 个答案:

答案 0 :(得分:1)

为什么不在菜单后面有<div id="content"></div>,然后使用
$("#content").load("your_file.html");

答案 1 :(得分:1)

replaceWith 用于替换一些具有不同DOM元素的DOM元素。我不认为这个功能可以解决这个问题。

您可以使用 .load 功能获取html文件内容并将其插入到您想要的任何位置。只需将点击事件绑定到每个链接,然后使用其 href atributtes即可获取相应的文件。在活动结束时不要忘记返回错误

类似的东西:

<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;
});

答案 2 :(得分:1)

要获取另一个HTML文件的某个部分,请使用jQuery load函数。您的案例中的基本用法是:

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

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

如果您想添加<a>标记旁边的元素,请考虑使用afterbefore jQuery函数。

要点击其中一个链接上的点击,请检查click