Question

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

所以我现在尝试制作这段代码：

<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();

        });
    });

由于

Answer 1

如何抓取#single div的内容并输入＃zen-content div？

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

如果您不想覆盖#zen-content内容：

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

或使用普通的js：

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

Answer 2

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

Answer 3

演示 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();

        });
    });

Answer 4

除了将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/。

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

4 个答案: