Question

我有一个菜单，我需要动态添加另一个ul.nav.navbar-nav.navbar-right和一个li。这是我的实际HTML：

<div id="menu navbar" class="collapse navbar-collapse">
  <ul class="level1 static nav navbar-nav">
    <li>...</li>
    <li>...</li>
  </ul>
</div>

之后我需要通过jQuery追加另一个ul（这是运行脚本后我需要的结果）

<div id="menu navbar" class="collapse navbar-collapse">
  <ul class="level1 static nav navbar-nav">
    <li>...</li>
    <li>...</li>
  </ul>
  **<ul class="nav navbar-nav navbar-right">
    <li>
      <a href="/Profile.aspx" class="img-nav-link">Profil</a>
    </li>
  </ul>**
</div>

Answer 1

你可以这样做：

$('#menu').append($('<ul/>').addClass('nav navbar-nav navbar-right'))

Answer 2

我不相信ID属性中允许使用空格。但如果他们是这样的话：

$("#menu navbar").append('<ul class="nav navbar-nav navbar-right"><li><a href="/Profile.aspx" class="img-nav-link">Profil</a></li></ul>')

另外，更复杂：

var ul = $("<ul/>",{
  class : "nav navbar-nav navbar-right"
}),
li = $("<li/>"),
a = $("<a/>",{
  href: "/Profile.aspx",
  class: "img-nav-link",
  text: "Profil"
});
a.appendTo(li)
li.appendTo(ul);
ul.appendTo("#menu navbar")

但您可能必须将ID从menu navbar更改为menuNavbar或其他内容。

Answer 3

你可以使用JQuery追加，或者你可以使用Javascript .innerHTML！像这样：

$("menu navbar").append('<ul class="nav navbar-nav navbar-right"><li><a href="/Profile.aspx" class="img-nav-link">Profil</a></li></ul>');

或

document.getElementById('whatever').innerHTML += 'whatever';

在jquery中div中的现有ul之后动态创建和附加ul

3 个答案: