如何将选定的div的html内容添加到textarea中? [英] How to add html content of selected div into a textarea?

问题描述

以下方法工作正常，但是当我将html添加到textarea中时，我还将div包裹在另一个div中，破坏了布局.

The following works fine, but when I add the html into the textarea, I am also wrapping the div within another div, breaking the layout.

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放置在文本区域中，而无需更改布局，基本上将其放置在文本区域中:

What I am trying to achieve is to place the whole html into the text area when pressing the button without to change the layout tho, basically placing this into the textarea:

<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>

推荐答案

最终，我通过使用 .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
    });
 });

这篇关于如何将选定的div的html内容添加到textarea中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！