修改jQuery中在jQuery中创建的html元素

Question

问题：我无法修改在函数内部创建的HTML元素。

码：

我读到我可以通过这种方式从字符串创建元素。

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

因此，我假设我可以使用选择器来修改这段HTML代码。

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

然后使用以下命令将HTML返回到字符串：

var html_str = base_html.html();

但是我还没有做到。

所需结果 ：

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

问题 ：

有没有一种方法可以从字符串创建HTML元素，然后再使用选择器对其进行修改？

Answer 1

在jquery find函数中，您必须将选择器作为字符串传递。

 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>