Question

首先是fiddle

我有一个类“Full”的图像，并且有一个div类“按钮组”，我想删除这个img并将其添加到div“group-of-buttons”之后用js，这是HTML代码：

<img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL"/>
<br><br>
<div class="group-of-buttons">
    <button class="one">One </button>
    <button class="two">Two </button>
</div>

任何帮助将不胜感激。

Answer 1

您可以使用insertAfter：

$('.FULL').insertAfter('.group-of-buttons');

Answer 2

应该做你想做的事。这只是使用.insertAfter() jQuery方法的问题。

＆＃13;

$(document).ready(function() {
  var img = $('img.FULL');
  img.insertAfter($('div.group-of-buttons'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL" />
<br>
<br>
<div class="group-of-buttons">
  <button class="one">One</button>
  <button class="two">Two</button>
</div>

＆＃13;

Answer 3

$('.one').on('click', function() {
  var img = $('img.FULL');
  img.remove();
  img.insertBefore('.group-of-buttons');
});
$('.two').on('click', function() {
  var img = $('img.FULL');
  img.remove();
  img.insertAfter('.group-of-buttons');
});

我希望这是你想要在这里实现的例子：http://jsfiddle.net/atrifan/1ejmzkhp/

Answer 4

我在代码中添加了一些额外的id和div。你可以尝试这个：按钮将img从一个div移动到另一个div。

<script>
 function moveImage(movefrom,moveto,img_id) {
  imgtxt = document.getElementById(movefrom).innerHTML;
  imgobj = document.getElementById(img_id);
  document.getElementById(movefrom).removeChild(imgobj);
  document.getElementById(moveto).innerHTML = imgtxt;
 }
</script>
<div id="div1"><img src="http://i.telegraph.co.uk/multimedia/archive/01622/nasa_1622185c.jpg" class="FULL" id="img"/></div>
<br><br>
<div class="group-of-buttons">
<button class="one" onclick="moveImage('div2','div1','img');">One </button>
<button class="two" onclick="moveImage('div1','div2','img');">Two </button>
</div>
<br>
<div class="secondary-div" id="div2">
    Secondary Div
</div>

我希望它有所帮助。

删除图像并使用jquery / javascript在div之后添加它

4 个答案: