更改另一个父母的孩子的父母

时间:2013-11-12 10:44:12

标签: javascript html

我是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>

我该怎么做?

2 个答案:

答案 0 :(得分: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>");

这将把一切都放在内心&#34;内部&#34; div中的div = class =&#34; new&#34;。

答案 1 :(得分: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/