Ändern von HTML-Element erstellt in jQuery, in jQuery

Question

Problem: Ich kann ein HTML-Element, das ich in einer Funktion erstellt habe, nicht ändern.

Code:

Ich las ich auf diese Weise ein Element aus einem String erstellen.

var base_html = $("<div id='base'><div id='chart_container_bars'></div>"+ 
         "<br>"+ 
         "<br>"+ 
         "<div id='chart_container_lines'></div>"+ 
         "<table class='table table-bordered' id='tabla_servicios' style='width:100%; padding:12px'>"+ 
         "</table>"+ 
        "</div>"); 

Also nahm ich an, ich könnte Selektoren verwenden, um diesen Teil des HTML-Codes wie folgt zu ändern.

var tabla_servicios = base_html.find($("#tabla_servicios")); 
tabla_servicios.html("<p>HI</p>"); 

Und dann bekommen Sie den HTML zurück in einen String mit:

var html_str = base_html.html(); 

Aber ich habe nicht in der Lage gewesen, es zu tun.

Wunscher:

var final_html_str = $("<div id='base'><div id='chart_container_bars'></div>"+ 
         "<br>"+ 
         "<br>"+ 
         "<div id='chart_container_lines'></div>"+ 
         "<table class='table table-bordered' id='tabla_servicios' style='width:100%; padding:12px'>"+ 
         "<p>HI</p>"+ 
         "</table>"+ 
        "</div>"); 

Frage:

Gibt es eine Möglichkeit ein HTML-Element aus einem String zu erstellen und es mit Selektoren danach ändern?

Answer 1

In jquery Suchfunktion müssen Sie den Selektor als Zeichenfolge übergeben.

var base_html = $("<div id='base'><div id='chart_container_bars'></div>"+ 
 
         "<br>"+ 
 
         "<br>"+ 
 
         "<div id='chart_container_lines'></div>"+ 
 
         "<table id='tabla_servicios' class='table table-bordered' id='tabla_servicios' style='width:100%; padding:12px'>"+ 
 
         "</table>"+ 
 
        "</div>"); 
 

 
var tabla_servicios = base_html.find("#tabla_servicios"); 
 
tabla_servicios.html("<p>HI</p>"); 
 

 
var html_str = base_html.html(); 
 

 
console.log(html_str);

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>