0

我是 js 新手，我有问题。我有这个 html 标记：

<div id="searchBar">
  <div>
    <a>some link </a>
    <span>some text </span>
  </div>
</div>

在使用 js 脚本后，我想得到这个：

<div id="searchBar">
  <div>
    <div class="toplink_bl">
      <a>some link </a>
      <span>some text </span>
    </div>
  </div>
</div>

但出了点问题，我明白了：

<div id="searchBar">
  <div>
      <a>some link </a>
      <span>some text </span>
      <div class="toplink_bl"></div>
  </div>
</div>

这是js代码：

 var toplink_div=document.createElement('div');
 toplink_div.className="toplink_bl";
 $(toplink_div).appendTo($("#searchBar div"));
 for(var i = 0; i < $("#searchBar div").childNodes.length; i++) {
  toplink_div.appendChild($("#searchBar div").childNodes[i]);
 };

UPD：
@Ricky Stam，谢谢，它有效！你能帮助解决同样的问题，但还有一些额外的问题吗？我在您的代码中添加了新行：

<div id="searchBar">
  <div class="inner">
    <a>some link </a>
    <span>some text </span>
    <input type="text" class="searchInput" value="" name="q" id="keywords" tabindex="1">
  </div>
</div>

我希望<div class='new'>包含两个元素<a>，<span>但不包含<input>。
所以使用后$( ".inner" ).wrapInner( "<div class='new'></div>");一定是这样的：

<div id="searchBar">
  <div class="inner">
    <div class='new'>
      <a>some link </a>
      <span>some text </span>
    </div>
    <input type="text" class="searchInput" value="" name="q" id="keywords" tabindex="1">
  </div>
</div>

我怎样才能做到这一点？

4

2 回答 2

4

HTML

<div id="searchBar">
  <div class="inner">
    <a>some link </a>
    <span>some text </span>
  </div>
</div>

Javascript

$( ".inner" ).wrapInner( "<div class='new'></div>");

这会将所有内容放在“内部”div 中，并放在 class="new" 的 div 中。

于 2013-11-12T10:49:35.373 回答
0

您应该改用prependTo。

按照他们的例子，这个：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

使用此代码：

$( "<p>Test</p>" ).prependTo( ".inner" );

结果如下：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    <p>Test</p>
    Hello
  </div>
  <div class="inner">
    <p>Test</p>
    Goodbye
  </div>
</div>

所以像这样改变你的代码：

 var toplink_div=document.createElement('div');
 toplink_div.className="toplink_bl";
 $(toplink_div).prependTo($("#searchBar div"));
 for(var i = 0; i < $("#searchBar div").childNodes.length; i++) {
  toplink_div.apendChild($("#searchBar div").childNodes[i]);
 };

在这里你可以看到它正在运行：http: //jsfiddle.net/WRWy5/1/

于 2013-11-12T10:48:17.037 回答