如何改變的HTML代碼中隱藏的塊值

Question

我有這個代碼隱藏塊，我想基於對從服務器接收到的值調用：

<div id="hiddenChart" style="display:none;"> 
    <li style="height:auto;"> 
     <div class="col-sm-4" id="chart_0_0"> 
      <div class="panel panel-success" style="width:550px; height:auto;" id="accordion_0_0"> 
       <div class="panel-heading"> 
        <div class="btn-group" style="float:right;"> 
         <i class="glyphicon glyphicon-minus" id="minimize_0_0"></i> 
         <i class="glyphicon glyphicon-remove" id="close_0_0"></i> 
        </div> 
        <h3 class="panel-title">title</h3> 
       </div> 
       <div class="panel-body" style="height:400px;"> 
        <nvd3-multi-bar-chart data="Sec1Graf1Data" id="dataChart_0_0" height="400" showXAxis="true" reduceXTicks="true" showYAxis="true" showLegend="true" showControls="true" tooltips="true"> 
         <svg></svg> 
        </nvd3-multi-bar-chart> 
       </div> 
      </div> 
     </div> 
    </li> 
</div> 

，但我需要改變一些值：ids,tags,data variables。

我知道如何使用"$('ul').append($('div').html());"來顯示代碼，但我必須在做之前更改它。

我該怎麼辦？

我如何定義在哪些字段中我必須插入字符串i'me接收？

THK

UPDATE：

我能夠把它的工作，這裏是它fiddle小提琴。 當我檢查元素，我想改變的ID，而不是＃1，它返回chart_0_0。

謝謝大家的帖子，並幫助

Answer 1

你可以得到這樣你的DIV的引用：

var $div = $('#hiddenChart'); 

要克隆它，

var $clonedDiv = $div.clone(); 

然後，在$ cloneDiv對象，請進行更改：

$clonedDiv.find(--selector of a node--).attr(atributeName, atributeValue); //change/add attribute 
$clonedDiv.find(--selector of a node--).removeAttr(atributeName); //remove attribute 

等。我不會解釋jQuery是如何工作的，Lekhnath給了你一個鏈接。

最後，您將$ clonedDiv與.appendTo（）插入到任意位置。原始的div保持不變，所以你可以一次又一次地克隆它。

Answer 2

的Jquery更改爲text/html從一個隱藏的div內容：

簡單

1. 保持隱藏的內容
2. 的副本替換基於與服務器的元素類/ id選擇內容響應
3. 然後將html粘貼到另一個div
4. 將隱藏的內容替換爲原始（可選）

http://jsfiddle.net/austinnoronha/ZJ3Nt/

$(document).ready(function(){ 

     var serverRes = { 
      title: "New Title In Header", 
      body: "New body text from server <\/br><nvd3-multi-bar-chart data=\"Sec1Graf1Data\" id=\"dataChart_0_0\" height=\"400\" showXAxis=\"true\" reduceXTicks=\"true\" showYAxis=\"true\" showLegend=\"true\" showControls=\"true\" tooltips=\"true\"><svg><\/svg><\/nvd3-multi-bar-chart>" 
     }; 

     var tmpOldCont = $("#hiddenChart").html(); 

     var counter = 1; 
     $(".serverres").click(function(){ 

      $("#hiddenChart").find(".panel-body").html(counter + " = " + serverRes.body); 
      $("#hiddenChart").find(".panel-title").text(serverRes.title + " " + counter); 
      counter++; 

      $(".box-container").html($("#hiddenChart").html()); 
      $("#hiddenChart").html(tmpOldCont); 
     }); 


    });