如果内容中存在iframe，如何将iframe /视频替换到另一个div？

Question

Wordpress网站。

我想要jquery或php，或者任何简单的解决方案，从div id=content (如果存在的话)获取div，并将其放在id=iframer div中，同时在id=content中删除div。

<div id="iframer">
**/ I am waitting to get "<div class="video">All content </div>" inside me. /**
</div>

<div id="content">
<div class="video">
<iframe width="697" height="392" src="https://www.youtube.com/embed/xxxxxxx?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>

结果经过一些剧本..。

<div id="iframer">
<div class="video">
<iframe width="697" height="392" src="https://www.youtube.com/embed/xxxxxxx?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>

<div id="content">
**/ Iframer stolen my content. /**
</div>

Answer 1

不知道为什么不能直接编辑HTML或生成这个HTML的代码，但是这里是我使用javascript/jQuery的解决方案。

<script>
//A page can't be manipulated safely until the document is "ready."
$( document ).ready(function() {
  //Get the html content inside div with id='content'
  var myHtml = $( '#content' ).html();

  //Copy the HTML in the div with id='iframer'
  $( '#iframer' ).html( myHtml );

  //Delete the HTML content inside div with id='content'
  $( '#content' ).html( '' );
});
</script>

Answer 2

我会使用.detach和.appendTo。这样，它就保留了绑定到DOM元素的事件监听器、插件等。

.detach()方法与.remove()相同，但.detach()保存与已删除元素关联的所有jQuery数据。当删除的元素稍后重新插入DOM时，此方法非常有用。

​

$( document ).ready(function() {
     $('button').click(function(){

          var content = $( '#content > .video' ).detach();

          content.appendTo('#iframer');
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="iframer" style="padding:5px; background:#CCC;"></div>

<button>Click</button>

<div id="content">
  <div class="video">
     Video Content here
  </div>
</div>

​

我增加了一些背景颜色和什么-不让它更视觉一点。

干杯!