如何将点击元素的所有html复制并粘贴到textarea中？

Question

目前我正在这样做：

var $items = $('<div class="grid-item col-xs-12 col-md-6"><img class="img-responsive" src="' + item.link + '"></div>');
$(".grid-item").on("click", function(){
  var $imageSelected = $(this).html();
  alert($imageSelected);
  $('#usp-custom-4').append($imageSelected); 
});

但是那个警报只给我img元素

<img class="img-responsive" src="...

无论如何它并没有将html添加到textarea。

更新

https://jsfiddle.net/BeastFox/36vet66q/现在使用outerHTML处理第一个答案但尚未粘贴到textarea中

Answer 1

问题：

1. 函数.html()将返回内部HTML，您需要使用.prop()使用outerHTML属性。
2. 从HTML
中的id属性中删除#
3. 使用.val()方法设置textarea元素
的值

码

$(".grid-item").on("click", function() {
    var $imageSelected = $(this).prop('outerHTML');
    $('#usp-custom-4').val(function(_, currentValue) {
        return currentValue + $imageSelected
    });
});

＆＃13;
＆＃13;
$(".grid-item").on("click", function() {
  var $imageSelected = $(this).prop('outerHTML');
  $('#usp-custom-4').val(function(_, currentValue) {
    return currentValue + $imageSelected
  });
});
＆＃13;
.grid-item {
  width: 100px;
  height: 30px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="grid-item">
  <span>1</span>
</div>
<div class="grid-item">
  <span>2</span>
</div>
<div class="grid-item">
  <span>3</span>
</div>
<div class="grid-item">
  <span>4</span>
</div>
<div class="grid-item">
  <span>5</span>
</div>
<div class="grid-item">
  <span>6</span>
</div>
<textarea id="usp-custom-4"></textarea>
＆＃13;
＆＃13;
＆＃13;