我是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>
我该怎么做?
答案 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/