adding the same div element more than once jquery

Question

I am trying to make a add clicked element data text inside other div using jquery.

Its operating logic should be as follows:

When you click word1 then this clicked word1 should be come in #words div after added the word1 if you want to add word2 also then click word2 it should be come in #words div also.

My problem is I can not add second clicked word.

Here is the DEMO from jsfiddle.

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   var oldWords = $(dataBox).html("<div class='ab'>"+dataWord+"</div>"); 
   $(dataBox).html(oldWords.html() + oldWords.html());
   return false;
});

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FAFAFA;
    font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-texts-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
}
.container {
  position:relative;
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:50px 0px;
  overflow:hidden;
}
.word {
  position:relative;
  background-color:red;
  border-radius:2px;
  margin-left:5px;
  color:#ffffff;
  float:left;
  font-weight:400;
  font-size:13px;
  padding:5px;
  cursor:pointer;
}
.word:hover {
  background-color:black;
  color:#ffffff;
}

.addedWords {
  position:relative;
  float:left;
  width:100%;
  padding:10px;
  background-color:#d8dbdf;
  margin-top:40px;
}

.ab {
  background-color:blue;
  color:#ffffff;
  margin-left:5px;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="word" data-word="word1">
    Word1
  </div>
  <div class="word" data-word="word2">
    Word 2
  </div>
  <div class="addedWords" id="words">

  </div>
</div>

Do you want to append corresponding data on click of each text? — Sinto
– Sinto, Commented Mar 12, 2018 at 6:13

Saurabh Solanki · Accepted Answer · 2018-03-12 06:30:14Z

4

just update your javascript onclick method like this:

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   var oldWords = dataBox.append("<div class='ab'>"+dataWord+"</div>"); 
   return false;
});

check jsfiddle here

answered Mar 12, 2018 at 6:30

Saurabh Solanki

2,20420 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sinto · Accepted Answer · 2018-03-12 06:18:47Z

3

You need to do only some changes in your code:

Instead of using html() use append()

var oldWords = $(dataBox).html("<div class='ab'>"+dataWord+"</div>");

As shown below:

var oldWords = $(dataBox).append("<div class='ab'>"+dataWord+"</div>");

html() completely replaces the element's content, whereas append() adds the new content at the end of any existing content

Comment out code which says: $(dataBox).html(oldWords.html() + oldWords.html());

.append() will tack on the given HTML to the end of the already present HTML in the element that you're calling .append() on, whereas .html() will overwrite the inner HTML that is currently present in the element with the new HTML that you've passed in.

If the element is empty, or if you want to replace the inner HTML of an element, then .html() is very handy. If you want to add a new string of html to an element (say, for example, you want to dynamically add a new list item), then .append() is great.

answered Mar 12, 2018 at 6:18

Sinto

3,97712 gold badges41 silver badges74 bronze badges

1 Comment

AlwaysStudent Over a year ago

The answer was educational. Thank you. All answers are correct, but I will accept your answer correctly.

Satpal · Accepted Answer · 2018-03-12 06:13:11Z

You just need to use .append()

$("#words").append("<div class='ab'>" + dataWord + "</div>");

$("body").on("click", ".word", function() {
  var dataWord = $(this).attr("data-word");
  var dataBox = $("#words");
  dataBox.append("<div class='ab'>" + dataWord + "</div>");
  return false;
});

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #FAFAFA;
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -ms-text-size-adjust: 100%;
  -webkit-texts-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
}

.container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0px auto;
  padding: 50px 0px;
  overflow: hidden;
}

.word {
  position: relative;
  background-color: red;
  border-radius: 2px;
  margin-left: 5px;
  color: #ffffff;
  float: left;
  font-weight: 400;
  font-size: 13px;
  padding: 5px;
  cursor: pointer;
}

.word:hover {
  background-color: black;
  color: #ffffff;
}

.addedWords {
  position: relative;
  float: left;
  width: 100%;
  padding: 10px;
  background-color: #d8dbdf;
  margin-top: 40px;
}

.ab {
  background-color: blue;
  color: #ffffff;
  margin-left: 5px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="word" data-word="word1">
    Word1
  </div>
  <div class="word" data-word="word2">
    Word 2
  </div>
  <div class="addedWords" id="words">

  </div>
</div>

PPL · Accepted Answer · 2018-03-12 06:14:55Z

2

You need to use

$(".word").on("click", function() {
           var dataWord = $(this).attr("data-word");
           var dataBox = $("#words");
           var oldWords = $(dataBox).append("<div class='ab'>"+dataWord+"</div>"); 
        });

answered Mar 12, 2018 at 6:14

PPL

6,5551 gold badge13 silver badges32 bronze badges

Comments

Guruprasad J Rao · Accepted Answer · 2018-03-12 06:15:25Z

Use .append instead of .html and you are copying the word again and again. Below is the working example.

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   var newWords = "<div class='ab'>"+dataWord+"</div>"; 
   $(dataBox).append(newWords);
   return false;
});

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #FAFAFA;
    font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-texts-size-adjust: 100%;
    -webkit-backface-visibility: hidden;
}
.container {
  position:relative;
  width:100%;
  max-width:400px;
  margin:0px auto;
  padding:50px 0px;
  overflow:hidden;
}
.word {
  position:relative;
  background-color:red;
  border-radius:2px;
  margin-left:5px;
  color:#ffffff;
  float:left;
  font-weight:400;
  font-size:13px;
  padding:5px;
  cursor:pointer;
}
.word:hover {
  background-color:black;
  color:#ffffff;
}

.addedWords {
  position:relative;
  float:left;
  width:100%;
  padding:10px;
  background-color:#d8dbdf;
  margin-top:40px;
}

.ab {
  background-color:blue;
  color:#ffffff;
  margin-left:5px;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="word" data-word="word1">
    Word1
  </div>
  <div class="word" data-word="word2">
    Word 2
  </div>
  <div class="addedWords" id="words">

  </div>
</div>

Ryuk Lee · Accepted Answer · 2018-03-12 06:18:58Z

2

Hope this help

$("body").on("click", ".word", function() {
   var dataWord = $(this).attr("data-word");
   var dataBox = $("#words");
   if(dataWord != $(dataBox).data('current')){
    $(dataBox).data('current', dataWord);      
    $(dataBox).html('');
   }   
   $(dataBox).html($(dataBox).html() + dataWord+ " ");
   return false;
});

js fiddle edited

answered Mar 12, 2018 at 6:18

Ryuk Lee

7445 silver badges12 bronze badges

Collectives™ on Stack Overflow

adding the same div element more than once jquery

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related