Question

使用jQuery的.html（）函数复制div是一个好主意，然后将它放在另一个部门中。

就像我制作了一个隐藏元素，它具有特定ID的分区（例如：在 #login 标识的div中的登录表单，在另一个由＃标识的注册表单中REG ）

现在点击导航菜单中的登录按钮，我正在使用 $（“＃login”）。html（）在一个id 。然后使用一些fadeIn和fadeOut效果将它放到主视口（这是一个＆lt; div＆gt;）。

所以我的问题是，这样做可以吗？或者它有一些新的影响？

<a href="#l2">Login</a>  <!-- a button in nav bar -->

<div class="plate"></div> <!-- view port -->



           <div class="hidden data"> <!-- set of hidden divs -->
                <div id="l1">   <!-- ///////////////////////// -->

                    Default

                </div>
                <div id="l2">   <!-- ///////////////////////// -->

                    <div id="form-box">
                        <form method="post" action="#">

                            <input class="fancy" style="background:url(img/user.png) no-repeat 20px center;" name="user" autocomplete="off" spellcheck="false" type="text" placeholder="Email..."><br/>
                            <input style="background:url(img/key.png) no-repeat 20px center;" name="pass" autocomplete="off" type="password" placeholder="Password..."><br/><br/>
                            <button type="submit">GO</button>

                        </form>
                        <a class="forgot-pass btn">Forgot Password?</a>
                    </div>

                </div>
                <div id="l4">   <!-- ///////////////////////// -->

                    Default

                </div>
                <div id="l3">   <!-- ///////////////////////// -->

                    <div id="form-box">
                        <form method="post" action="#">

                            <input name="user" style="background:url(img/user.png) no-repeat 20px center;" autocomplete="off" spellcheck="false" type="text" placeholder="Username..."><br/>
                            <input name="email" style="background:url(img/email-48.png) no-repeat 20px center;" autocomplete="off" spellcheck="false" type="text" placeholder="Email..."><br/>
                            <input name="pass" style="background:url(img/key.png) no-repeat 20px center;" autocomplete="off" type="password" placeholder="Password..."><br/>
                            <input name="pass_again" style="background:url(img/key.png) no-repeat 20px center;" autocomplete="off" type="password" placeholder="Password Again..."><br/><br/>
                            <button type="submit">GO</button>

                        </form>
                    </div>

                </div>
            </div>





    <script type="text/javascript">
        var screenH = $(window).height();
        var navH = $(".nav").height();
        var folioH = screenH - navH;
        $("#folio").css("height",folioH+"px");

        $(".menu a").on("click",function(){
            var data = $(this).attr("href");
            var target = $(this).attr("data-target");

            var data = $(data).html();
            $(target).fadeOut(500, function(){
                $(this).html(data).fadeIn(500);
            });

        });
    </script>

Answer 1

是的，因为你会有这样的重复ID。

使用以下代码移动DOM中的元素：

jQuery("#login").hide().appendTo("#viewport").fadeIn();

使用.html（）复制元素然后将其放到另一个<div>，是否安全？</div>

1 个答案: