Question

WordPress网站。

我想要jquery或php或任何简单的解决方案，它将从div id = content抓取div（如果存在），并将其放在id = iframer div中，并在加载时将其删除到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>

我添加了一些背景色，但没有增加它的外观。

干杯！

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

2 个答案: