[英]Removing an image and adding it after div with jquery/javascript
Firsly here's the fiddle 这是小提琴
I have an image with class "Full", and there is a div with class "group-of-buttons", I want to remove this img and add it after the div "group-of-buttons" with js, here's the HTML Code: 我有一个类别为“ Full”的图像,并且有一个类别为“ group-of-buttons”的div,我想删除此img,并将其添加到带有js的div“ group-of-buttons”之后,这是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>
Any help would be appreciated. 任何帮助,将不胜感激。
您可以使用insertAfter :
$('.FULL').insertAfter('.group-of-buttons');
Should do what you want. 应该做你想做的。 It was just a matter of using the .insertAfter()
jQuery method. 只需使用.insertAfter()
jQuery方法即可。
$(document).ready(function() { var img = $('img.FULL'); img.insertAfter($('div.group-of-buttons')); });
<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>
$('.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');
});
I hope this was what you were looking to achieve example here: http://jsfiddle.net/atrifan/1ejmzkhp/ 我希望这就是您要在此处实现示例的目标: http : //jsfiddle.net/atrifan/1ejmzkhp/
I added some extra id and div to your code. 我在代码中添加了一些额外的id和div。 can you try this : buttons moves img from one div to another. 您可以尝试一下:按钮将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>
I hope it helps. 希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.