javascript - jquery 多次添加相同的 div 元素

Question

我正在尝试使用 jquery 在其他 div 中添加单击的元素数据文本。

其运行逻辑应如下:

当您单击word1时，如果您还想添加word2，那么单击的word1应该在添加word1后出现在#words div中，然后单击word2，它也应该出现在#words div中。

我的问题是我无法添加第二个点击的单词。

这是DEMO 来自 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>

Answer 1

只需更新您的 javascript onclick 方法，如下所示:

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

检查jsfiddle here