Question

大家，

我还是初学者。

我想问一下，我想在ul标签之前添加一个链接，如下面的代码

<div id="PageList1" class="widget PageList">
<div class="widget-content">
<ul>
<li class="selected"><a href="/">Home</a></li>
<li><a href="/">Gallery</a></li>
<li><a href="/">Contact</a></li>
<li><a href="/">About</a></li>
</ul>
</div>
</div>

我添加了代码<a href="#" id="pull"> Menu </ a>并变成了这样的

<div id="PageList1" class="widget PageList">
<div class="widget-content">
<a href="#" id="pull">Menu</a> /*---I would like to add this.----*/
<ul>
<li class="selected"><a href="/">Home</a></li>
<li><a href="/">Gallery</a></li>
<li><a href="/">Contact</a></li>
<li><a href="/">About</a></li>
</ul>
</div>
</div>

我尝试使用before ()，但它不起作用，希望你可以帮助我。

$("#PageList1 ul").before("<a id="pull" href="#">Menu</a>");

或

$("#PageList1 .widget-content").prepend("<a href='#' id='pull'>Menu</a>");

代码不起作用。

谢谢，问候

Answer 1

以下是使用.before()

执行此操作的方法

$(function(){

    $('#PageList1 ul').before('<a href="#" id="pull"> Menu </ a>');

});

另见jsFiddle： http://jsfiddle.net/C7T8P/1/

Answer 2

尝试以下Html代码。

<html>
<head>
<title>Link Before the UL</title>
<style type="text/css">
#navlist
{
padding-left:10px;
margin-left:0px;
display:inline;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="navcontainer">
<a href="#" id="pull">Menu</a>
<ul id="navlist">
<li id="active"><a href="#" id="current">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div
</body>
</html>

Answer 3

这将有效

$('div.widget-content').prepend('<a href="#" id="pull">Menu</a>');

Answer 4

 $('.widget-content').prepend('<a href="#" id="pull">Menu</a>');

test it here jsfiddle;

Answer 5

你可以试试像

这样的东西

document.getElementsByClassName("widget-content")[0].innerHTML = "<a href="#" id="pull">Menu</a>" +document.getElementsByClassName("widget-content")[0].innerHTML;

在元素ul之前添加链接

5 个答案: