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

大家好，我正在尝试为我的博客文章创建一个“zen view”模式，所以我只想获取#单个div的内容（只包含没有标题或侧边栏等的文章内容），然后将其放入另一个名为#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>

谢谢

如何获取#single div的内容并将其放入#zen content div

如果您不想覆盖

#zen内容

内容：

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

或者使用普通js：

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

如何获取#single div的内容并将其放入#zen content div

如果您不想覆盖

#zen内容

内容：

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

或者使用普通js：

document.getElementById('zen-content').innerHTML += $('#single').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();

        });
    });​

演示

好书：

代码

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

        });
    });​

---

除了按照前面的回答将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，而不仅仅是内容

---

另请参见此处的运行示例：。

以及根据前面的回答将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，而不仅仅是内容

---

另请参见此处的运行示例：.

++1，现在我将键入30个字符！谁在-1-ing（向下投票）：）这个？@Tats\u innit。我想有些人已经达到了极限，不介意丢一分<代码>：）lolz:P当我输入上一条评论时，我的+1就不见了，如果你在科技夏令营或大学里玩过，它就像狼獾游戏一样P（贫穷的村民总是手下留情）：）你最后一行的另一个选择是

$（'zen content'）.append（$（'single'）.html（））（请注意，您当前正在将“#zen content”设置为显示其自己的内容，而不是从“#single”中获取内容）。@nnnn。哎呀。。比LOL.++1更好，现在我将键入30个字符！谁在-1-ing（向下投票）：）这个？@Tats\u innit。我想有些人已经达到了极限，不介意丢一分<代码>：）

lolz:P当我输入上一条评论时，我的+1就不见了，如果你在科技夏令营或大学里玩过，它就像狼獾游戏一样P（贫穷的村民总是手下留情）：）你最后一行的另一个选择是

$（'zen content'）.append（$（'single'）.html（））（请注意，您当前正在将“#zen content”设置为显示其自己的内容，而不是从“#single”中获取内容）。@nnnn。哎呀。。比LOL更好。与您的问题无关，但您为什么使用类（“zen”和“close”）来完成ids的工作？与您的问题无关，但您为什么使用类（“zen”和“close”）来完成ids的工作？