多次添加相同的div元素jquery

Question

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

它的运行逻辑应该如下：

当你点击 word1 时，这个点击的 word1 应该在添加 word1 之后进入 #words div 如果你想添加 word2 然后点击 word2 它应该也进入 #words div。

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

这是来自 jsfiddle 的 DEMO。

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

Answer 2

您只需对代码进行一些更改：

不要使用html()，而是使用append()

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

如下图：

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

html() 完全替换元素的内容，而 append() 在任何现有内容的末尾添加新内容

注释掉代码： $(dataBox).html(oldWords.html() + oldWords.html());

.append() 会将给定的 HTML 添加到您正在调用 .append() 的元素中已经存在的 HTML 的末尾，而 .html() 将使用您传入的新 HTML 覆盖当前存在于元素中的内部 HTML。

如果元素为空，或者要替换元素的内部 HTML，那么 .html() 非常方便。如果你想给一个元素添加一个新的 html 字符串（比如说，你想动态地添加一个新的列表项），那么 .append() 就很好了。

Answer 3

你只需要使用.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>

Answer 4

你需要使用

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

Answer 5

使用.append 而不是.html，您将一次又一次地复制word。下面是工作示例。

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

Answer 6

希望有帮助

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