JQuery Редактирование innerHTML после его выбора с .html()

Question

Я генерации строк динамически с PHP из базы данных после того, как он компилирует исходный код страницы выглядит примерно так:

Snippet

<div class="options" id="options"> 
     <div class="left_wrap"> 
      <ul> 
       <li class="col_id b-bottom"></li> 
       <li class="hazard_header"><h3>Hazard</h3></li> 
       <li class="hazard_input b-bottom"></li> 
       <li class="con_header b-bottom"><h3>Controls</h3></li> 
       <li class="cat_header"><h3>Consequence Category</h3></li> 
       <li class="cat_options"></li> 
      </ul> 
     </div> 
     <div class="right_wrap"> 
      <h2>Inherent Risk (Assessed risk without controls)</h2> 
      <ul class="fields"> 
       <li class="bg b-top b-right"><h3>Consequence Level</h3><br/><span class="con_level_val"></span></li> 
       <li class="b-top b-right"><h3>Probability</h3><br/>Possible</li> 
       <li class="bg b-top b-right"><h3>Exposure (frequency)</h3><br/></li> 

После загрузки страницы я захватываю содержимое обертки options.

JQuery Отрывок:

content = $("div.options").html(); 

который в свою очередь сохраняет код выше в переменной content. Теперь, мой вопрос, как я могу редактировать содержимое переменной content. Например, мне нужно добавить значение в li с классом Col_ID, например 1,2,3,4, и при удалении я должен снова изменить содержимое.

Как я могу что-то сделать по линиям content.getElement?

Answer 1

Если вам действительно нужно работать с HTML-строкой, вот что вы можете сделать:

content = $("div.options").html(); 
var $content = $(content); 
// now $content is a jQuery object with a bunch of (detached) elements 
// you can use the common functions on it without problems, such as 
$content.find("li.col_id").text("Some text"); 

// now you need to do something with $content, or everything you did will... 
// ...be lost. You cold, for instance, update the other variable back: 
content = $content.html(); 
// content now has the updated HTML 

Теперь, если вам не нужна строка HTML на всех, то вы можете напрямую работать как:

content = $("div.options"); 
content.find("li.col_id").text("Some text"); 
// now the DOM was already updated as you are dealing with attached elements