javascript - 如何将选定div的html内容添加到textarea中？

Question

以下工作正常，但是当我将 html 添加到文本区域时，我还将该 div 包装在另一个 div 中，从而破坏了布局。

var urls = [];
$('body').on('click', '.btn_video', function() {
  var $myVideo = $(this).parent().parent().wrap('<div class="col-xs-12 col-md-6"/>');
  var $myVideoWrapped = $($myVideo.parent().parent());
  console.log($myVideoWrapped.html());
  urls.push($myVideoWrapped.html());
  $('#usp-custom-5').text(urls.join(' '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6">
   <div class="thumbnail">
     <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/V9GsS-aMVNs" frameborder="0" allowfullscreen=""></iframe>
     </div>
    <div class="caption">
      <p>Duration: <span class="video-time">10:35</span></p>
      <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
    </div>
   </div>
  </div>

我想要实现的目标是在按下按钮时将整个 html 放入文本区域而不更改布局，基本上将其放入文本区域:

<div class="col-xs-12 col-md-6">
   <div class="thumbnail">
     <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/V9GsS-aMVNs" frameborder="0" allowfullscreen=""></iframe>
     </div>
    <div class="caption">
      <p>Duration: <span class="video-time">10:35</span></p>
      <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
    </div>
   </div>
  </div>

Answer 1

最终我通过使用 .prop() 解决了这个问题和outerHTML

$('body').on('click', '.btn_video', function() {
   var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
   $('#usp-custom-5').val(function(_, currentValue) {
      return currentValue + $imageSelected
    });
 });