CODEWITHSUNDEEP
javascriptjqueryhtml
AlwaysStudent
AlwaysStudent

Reputation: 1374

adding the same div element more than once jquery

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>

Upvotes: 0

Views: 98

Answers (6)

Saurabh Solanki
Saurabh Solanki

Reputation: 2204

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

Upvotes: 4

Ryuk Lee
Ryuk Lee

Reputation: 744

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

Upvotes: 2

Sinto
Sinto

Reputation: 3997

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.

Upvotes: 3

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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>

Upvotes: 2

PPL
PPL

Reputation: 6555

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>"); 
        });

Upvotes: 2

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 3

Related Questions