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

回答

相關問題