Question

i have a user div, containing a list of users and onclick of any user i want a div with 3 child divs to be appended to another parent div.but when try running my code, 3 appended divs are created when two users are clicked and 5 appended divs are created when 3 users are clicked please any help will be appreciated. below is my code

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

Answer 1

You shoud add some distinct tag to the wrapper class name that is added to the mainwrapper when you create the new divs so as to associate it with the specific user that was clicked.

To do that pass the tag ("user1" for example) in the create function.

Then name wrapper class as wrapper_user1 instead of just wrapper.

What happens with your code is that when you click on the 2nd and 3rd user, when you append to "wrapper" it is appending to the new wrapper you added, but also to the ones you created before by clicking user 1 and 2.

The same happens with wrapper3. I suggest you tag all your wrappers with the corresponding user in case you add more functionality.

If you want to keep the tagging only at the first level of wrappers you will need to change how you select the different elements by prepending the corresponding tagged wrapper in the jQuery selector.

Note: Also check your code. js has some syntax errors and undefined variables. Css also has syntax errors.

$(".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>

Answer 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添加到＆＃39; parentDiv＆＃39;

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

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

add div to parent div without duplication

2 个答案: