将一个元素从 div 移动到另一个 - 不起作用

Question

我正在尝试将 Grid3 移动到 Grid2 - 我正在使用此代码，但它不起作用，我做错了什么？

还有没有办法将 Grid3 中的一半 Div 移动到 Grid1，而将另一半移动到 Grid2？

JS

$("#grid3").appendTo("#grid2");

HTML

        <div class="wrapperA1">
            <div class="content">
                <div id="home-sectionD">
                    <div id="grid1"><!--Gird 1-->   

                        <article class="testimonial">
                        <img alt="Neal Kilburne​​" src="assets/images/neal kilburne​​.jpg"/>
                            <div>
                                <h3>Neal Kilburne​​</h3>
                                <p>CEO, iTEQ Global www.iteqglobal.com</p>
                                    <br>
                                <p>“Loai is a great asset to our company and provides us with great and quick responses,Such a talented designer which we have the honour of working with.” 2011 - 2012</p>
                            </div>  
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Amanda Chui​</h3>
                                <p>Owner of www.beautyroom.ca</p>
                                    <br>
                                <p>Just what my website needed! When I had finished my website, I felt that it was missing something,so I enlisted in the help of Loai. He did a great job of giving my website the professional and polished look it needed without having me wait for days on end. Thanks, Loai!” June 23, 2012</p>
                            </div>
                        </article>

                    </div><div id="grid2"><!--Gird 2-->     

                        <article class="testimonial">
                            <img alt="Geeta Martinez" src="assets/images/geeta martinez.jpg"/>
                            <div>
                                <h3>Geeta Martinez</h3>
                                <p>Lawyer &amp; Business Consultant</p>
                                    <br>
                                <p>"Leo did a great job! He designed and put together several websites for me in less than a week. He was incredibly patient and flexible throughout the whole process, and took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
                            </div>  
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Richard Jackson</h3>
                                <p><em>Photographer www.rjpstudios.co.uk​</em></p>
                                    <br>
                                <p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
                            </div>
                        </article>  

                    </div><div id="grid3"><!--Gird 3-->         

                        <article class="testimonial">
                            <img alt="Glen Eric Huysamer" src="assets/images/glen eric huysamer.jpg"/>
                            <div>
                                <h3>Glen Eric Huysamer​</h3>
                                <p>Specialist Service Provider.</p>
                                    <br>
                                <p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up and strap yourself in as this young designer and associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, and can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
                            </div>
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Ciprian Filip​</h3>
                                <p>Founder of Pontomat.ro​</p>
                                    <br>
                                <p>“Worked with Loai on designing exposure of our social media presence on Facebook for our E-commerce initiative. He is very passionate and expert in his field of work, coming with breakthrough innovations in real time. He is able to manage an end to end social media exposure with accent on clarity, effectiveness and innovation. His working capabilities are awesome and I am sure that he will make good contribution to any project he works on.”  August 4, 2011</p>
                            </div>
                        </article>

                    </div>                      
                </div>
            </div>
        </div>

Answer 1

似乎对我有用 (http://jsfiddle.net/k2NMD/9/)。

在浏览器实际处理所有 html 之前，您可能过早调用 append。尝试将您的附加函数包装在 $(document).ready() 函数中。

$(document).ready(function () {
    $("#grid3").appendTo("#grid2");
});

Answer 2

移动确实有效（如果您在文档加载后运行代码，例如在$(document).ready() 事件中）。在开发者控制台中检查元素（如果您使用的是 Chrome）以查看 #grid3 实际上在 #grid2 中，就像这样

<div id="grid2">...
    <article...>
    <article...>
    <div id="grid3">...
</div>

如果您想将grid3 的内容移动到grid2 中，那么您必须使用$('#grid3').find('article').appendTo('#grid2') 获取文章，这将从grid3 中删除文章并将其插入grid2。它的移动部分可以通过分离article并将一个插入grid1和另一个插入grid2来完成。