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

Question

Wordpress site.

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

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

我添加了一些背景颜色和不添加的内容，以使其更加直观。

干杯！