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 вам нужно передать селектор в виде строки.

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>