在元素 ul 之前添加链接答案

【问题标题】：Add Link Before Element ul在元素 ul 之前添加链接
【发布时间】：2013-07-26 04:27:00
【问题描述】：

大家，

我还是个初学者。

我想问一下，我想在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>");

代码不起作用。

谢谢，问候

【问题讨论】：

显示您的尝试，我们可以告诉您哪里出错了。
第一个引号被破坏，第二个指向错误的元素。
@Musa 我已经编辑过了，谢谢
@Musa 我该怎么办？

标签： jquery add

【解决方案1】：

试试下面的 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>

【讨论】：

【解决方案2】：

以下是使用 .before() 的方法

$(function(){

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

});

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

【讨论】：

元素'Pagelist1'内的'ul'标签，如果你使用代码标签'ul'也可以添加
当然，您可以在选择器中添加#PageList1。更新了我的答案。
您是否像我在 jsFiddle 中展示的那样将其包裹在 $(function(){ 中？再次更新了我的答案。如果您使用的是 Chrome，您可以按 F12 并调出“开发者工具”并在右下角查找红色“x”错误。单击该错误，这可能会给您一个线索，让您了解 jquery 的问题。
是的，我用过，问题已经解决了，下次我可能会再问你，问候
好的，不用担心。我的另一个想法是这是你的报价。你必须确保你没有将它们混合不当。单引号将整个语句包裹在外部，然后在内部使用双引号，反之亦然。问候。

【解决方案3】：

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

test it here jsfiddle;

【讨论】：

我使用选择器'widget-content'。我只是添加元素。
我尝试添加选择器#PageList1并成功，谢谢，问候。

【解决方案4】：

这会起作用

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

【讨论】：

我已经解决了问题，也许下次我会再问你，问候

【解决方案5】：

你可以试试

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

【讨论】：

我使用选择器'widget-content'。我只是添加元素。
您必须添加更具体的选择器，例如使用 getElementsById 并将 id 添加到该特定标签，或者如果您只在一个页面上使用它，请将 [ ] 中的 0 替换为与正确的小部件内容元素对应的数字
我已经解决了问题，也许下次我会再问你，问候