抓取div的内容并插入另一个div

嗨，大家好，我正在尝试为我的博客文章创建一个“zen视图”模式，所以我只想抓取#single div的内容（仅文章内容没有标题或siderbar等），并把它放到另一个名为＃禅 - 视图的div，请注意，我使用WordPress。抓取div的内容并插入另一个div

所以我尽量让这个代码现在：

<button class="zen">Read in Zen mode</button> // when clicked display #zen-view div 
<div id="zen-view"> // initialy the css of that div is set to display:none 
<p id="zen-content"></p> // the tag where the contet of the #single div will be load 
<button class="close" href="#">Close Zen mode</button> // when clicked close zen-view div 
</div>

，这里是jQuery的

$(function() { 

    $('.zen').click(function() { 
      $('#zen-view').show(); 
      ... how can i grab the content of #single div and put into #zen-content div? ... 
     }); 
    $('.close').click(function() { 
      $('#zen-view').hide(); 

     }); 
    });

感谢

来源

2012-06-21 FRA

与您的问题无关，但您为什么使用类（'zen'和'close'）来完成ID的工作？ – nnnnnn

我怎么能抓住#single的内容div并放入＃禅内容的div？

$('#zen-content').html($('#zen-content').html());

如果你不希望覆盖#zen-content内容：

$('#zen-content').append($('#single').html());

或用纯JS：

document.getElementById('zen-content').innerHTML += $('#single').html();

来源

2012-06-21 11:03:06 gdoron

++ 1，现在我将键入30个字符！谁是-1-ing（downvoting）:)）这个？ –

@Tats_innit。我想有人已经达到了帽子，并且不介意失去一点....'：）' – gdoron

lolz：P，并且尽快键入我以前的评论我的+1已不存在LMAO 就像一场狼獾游戏一样，如果你曾经在科技阵营或者大学生中玩过一个。：P（可怜的村民总是有低手）:) –

$('#zen-content').html($('#single').html());

来源

2012-06-21 11:03:43 Farahmand

演示http://jsfiddle.net/QRv6d/11/

良好读取：http://api.jquery.com/html/

代码

$(function() { 

    $('.zen').click(function() { 
      $('#zen-view').show(); 
      $('#zen-content').html($('#single').html()); 
      //... how can i grab the content of #single div and put into #zen-content div? ... 
     }); 
    $('.close').click(function() { 
      $('#zen-view').hide(); 

     }); 
    });

来源

2012-06-21 11:04:34

除了复制HTML代码作为字符串转换成另一种元素由以前的答案的建议，你可以克隆的实际DOM树，例如：

$('#zen').append($('#single').children().clone());

针对以下HTML：

<div id="single"> 
    <div class="innerContent">Some content over here <i>with markup</i></div>  
</div> 
<div id="zen" />

但是，这需要您将博客文章的内容放入另一个div，因为如果没有children()的调用，您将克隆原始博客文章的div而不是仅克隆内容。

另请参见这里的一个运行示例：http://jsfiddle.net/N3wFH/。

来源

2012-06-22 06:42:16

抓取div的内容并插入另一个div

回答

相关问题