将 div 添加到父 div 而不重复答案

【问题标题】：add div to parent div without duplication将 div 添加到父 div 而不重复
【发布时间】：2017-08-13 22:43:54
【问题描述】：

我有一个用户 div，其中包含一个用户列表和任何用户的 onclick 我希望将具有 3 个子 div 的 div 附加到另一个父 div。但是当尝试运行我的代码时，当两个用户创建 3 个附加的 div单击并在单击 3 个用户时创建 5 个附加的 div，任何帮助将不胜感激。下面是我的代码

<htmL>
    <head>
        <script src="js/jquery-1.11.1.min.js"></script>
    </head>
<style>
.clear{
    clear:both:
}
.mainwrapper{
    width:700px;
    border-style:solid;
    bottom:5000px;
    z-index:2;
    margin-left:20px;
    margin-top:150px;
    //display:none;
}
.wrapper{
    height:300px;
    width:300px;
    border-style:solid;
    float:left;
}
.wrapper1{
    height:90px;
    width:280px;
    border-style:solid;
    margin:5px;

}
.wrapper11{
    height:50px;
    width:80px;
    border-style:solid;
    float:left;
}
.wrapper12{
    height:50px;
    width:190px;
    border-style:solid;
}
.wrapper2{
    height:90px;
    width:280px;
    border-style:solid;
    margin:5px;
}
.wrapper21{
    height:50px;
    width:80px;
    border-style:solid;
    float:left;
}
.wrapper22{
    height:50px;
    width:190px;
    border-style:solid;
}

.wrapper3{
    height:90px;
    width:280px;
    border-style:solid;
    margin:5px;
}
</style>
<body>
        <div class="user">
             <p><a href="#">first</a></p>
             <p><a href="#">second</a></p>
             <p><a href="#">thid</a></p>

        </div>

                <!----parent container---->
                    <div class="mainwrapper">


                    </div>
</body>
<script>

        $(".user").click(function () {


        //alert('oko');

            create();

        })
        function create(){


            $('<div/>',{ class : 'wrapper'}).appendTo(".mainwrapper");

                        $('<div/>',{ class : 'wrapper1'}).appendTo(".wrapper");


                            $('<div/>',{ class : 'clear'}).appendTo(".wrapper1");

                        $('<div/>',{ class : 'wrapper2'}).appendTo(".wrapper");

                            $('<div/>',{ class : 'clear'}).appendTo(".wrapper2");

                        $('<div/>',{ class : 'wrapper3'}).appendTo(".wrapper");

                            $(".wrapper3").append('<form action="chatprocess.php?id="+"e"+" method="POST">');
                                $(".wrapper3 form").append('<input type="text" placeholder="Name" name="a" id="rname"/>');
                                $(".wrapper3 form").append('<br><input type="submit" name="submit" value="Send" />');
                                $(".wrapper3 form").attr('action', 'chatprocess.php?send='+send+'&&rec='+user+'&&cat='+cat);
                                return user
        }

</script>
</html>

【问题讨论】：

也许可以创建一个 JSFiddle。这样才能更好地理解问题。

标签： javascript jquery

【解决方案1】：

您应该在创建新 div 时添加到 mainwrapper 的包装类名称中添加一些不同的标签，以便将其与单击的特定用户相关联。

为此，请在创建函数中传递标签（例如“user1”）。

然后将包装器类命名为 wrapper_user1 而不仅仅是包装器。

您的代码发生的情况是，当您单击第二个和第三个用户时，当您附加到“包装器”时，它会附加到您添加的新包装器，而且还会附加到您之前通过单击用户 1 和2.

wrapper3 也是如此。我建议您使用相应的用户标记所有包装器，以防您添加更多功能。

如果您只想将标记保留在包装器的第一级，则需要通过在 jQuery 选择器中添加相应的标记包装器来更改选择不同元素的方式。

注意：还要检查您的代码。 Node.js 有一些语法错误和未定义的变量。 Css 也有语法错误。

$(".user a").click(function() {
  //alert('oko');
  var tag = $(this).attr('data-tag');
  create(tag);
});


function create(tag) {
  var newClass = 'wrapper_' + tag;
  
  //Declared for snippet to work
  var send ="";
  var user="";
  var cat="";
  //----------
  
  $('<div/>', {
    class: newClass
  }).appendTo(".mainwrapper");
  $('<div/>', {
    class: 'wrapper1 wrapper1_' + tag
  }).appendTo("." + newClass);

  $('<div/>', {
    class: 'clear'
  }).appendTo(".wrapper1_" + tag);
  $('<div/>', {
    class: 'wrapper2 wrapper2_' + tag
  }).appendTo("." + newClass);

  $('<div/>', {
    class: 'clear'
  }).appendTo(".wrapper2_" + tag);
  $('<div/>', {
    class: 'wrapper3 wrapper3_' + tag
  }).appendTo("." + newClass);

  $(".wrapper3_" + tag).append('<form action="chatprocess.php?id="+"e"+" method="POST">');
  $(".wrapper3_" + tag + " form").append('<input type="text" placeholder="Name" name="a" id="rname"/>');
  $(".wrapper3_" + tag + " form").append('<br><input type="submit" name="submit" value="Send" />');
  $(".wrapper3_" + tag + " form").attr('action', 'chatprocess.php?send=' + send + '&&rec=' + user + '&&cat=' + cat);
  return user;
}

.clear {
  clear: both;
}

.mainwrapper {
  width: 700px;
  border-style: solid;
  bottom: 5000px;
  z-index: 2;
  margin-left: 20px;
  margin-top: 150px;
  //display:none;
}

.wrapper {
  height: 300px;
  width: 300px;
  border-style: solid;
  float: left;
}

.wrapper1 {
  height: 90px;
  width: 280px;
  border-style: solid;
  margin: 5px;
}

.wrapper11 {
  height: 50px;
  width: 80px;
  border-style: solid;
  float: left;
}

.wrapper12 {
  height: 50px;
  width: 190px;
  border-style: solid;
}

.wrapper2 {
  height: 90px;
  width: 280px;
  border-style: solid;
  margin: 5px;
}

.wrapper21 {
  height: 50px;
  width: 80px;
  border-style: solid;
  float: left;
}

.wrapper22 {
  height: 50px;
  width: 190px;
  border-style: solid;
}

.wrapper3 {
  height: 90px;
  width: 280px;
  border-style: solid;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user">
  <p><a data-tag="user1" href="#">first</a></p>
  <p><a data-tag="user2" href="#">second</a></p>
  <p><a data-tag="user3" href="#">thid</a></p>
</div>

<!----parent container---->
<div class="mainwrapper"></div>

【讨论】：

【解决方案2】：

有一个 DIV 集，您想在其中追加//添加 3 个 DIV，如下所示：

    <div id='parentDiv'>
        <!-- place where 3 DIVs will be inserted -->
    </div>

在某个地方，您将有三个文本发生单击事件，将 onClick 事件添加到所有文本：

    <div>
        <a class = 'clickMe' onclick="myFunction()">one</a></div></br>
        <a class = 'clickMe'onclick="myFunction()">two</a></br>
        <a class = 'clickMe'onclick="myFunction()">three</a></br>
    </div>

在脚本标签中定义一个在父 DIV 中有 3 个 DIV 的字符串，如下所示：

    var divWith3ChildDiv = '<div><div style="background-color:blue;">this is 1st added DIV</div><div style="background-color:red;">2nd Added DIV</div><div style="background-color:pink;">3rd added DIV</div></div>';//a parent DIV with 3 DIVs inside it

然后您可以使用 onClick 事件函数，该函数将使用 innerHTML 方法将上面定义为 HTML 的字符串添加到“parentDiv”

    var getElements = document.getElementsByClassName('clickMe');
    var myDiv = document.getElementById('parentDiv');

    function myFunction(){
    myDiv.innerHTML = divWith3ChildDiv;
    }

【讨论】：