使用.html()复制一个元素，然后把它放到另一个

Copying an element using .html() and then putting it to another <div>, is it safe?

本文关键字：然后 另一个 一个 复制 html 使用 元素      更新时间：2023-09-26
中，是安全的吗?

使用jQuery的。html()函数复制一个div，然后把它放在另一个分区，这是一个好主意吗?

这就像我做了一个隐藏的元素，它有特定的id划分(例如:登录表单在一个div中由#login标识，另一个注册表单由#reg标识)

现在通过点击导航菜单中的登录按钮，我正在复制div使用$("#login").html()在一个javascript变量的id #login在该隐藏变量集。然后把它放在主视窗(这是一个

)与一些淡出和淡出效果。

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

<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>

是的，因为那样会有重复的id。

使用下面的代码在DOM中移动元素:

jQuery("#login").hide().appendTo("#viewport").fadeIn();
相关文章：