title: How do I append children into a div in one line
body: <p>I want an element to first be replaced with a div then that div will have some children by append():</p>
  
  <pre><code>$(el).html('&lt;div&gt;&lt;/div&gt;').append('&lt;span&gt;&lt;/span&gt;').append('&lt;span&gt;&lt;/span&gt;')
  </code></pre>
  
  <p>doesn't give me what I want since the div and the spans are siblings.</p>
  
  <p>I also tried:</p>
  
  <pre><code>$(el).replaceWith('&lt;div&gt;&lt;/div&gt;').append('&lt;span&gt;&lt;/span&gt;').append('&lt;span&gt;&lt;/span&gt;')
  </code></pre>
  
  <p>without success. This line doesn't work with AngularJS (directives).</p>
  
  <p>Is there a simple way to make the spans children of the div?</p>
  
  <p>UPDATE:</p>
  
  <p>This is what I ended up using:</p>
  
  <pre><code>$(element)
    .html($('&lt;div class="property-filter"&gt;&lt;/div&gt;')
    .append(labelElm)
    .append(amountElm)
    .append(sliderElm));
  </code></pre>
  
  <p>since it was simple to understand (to me).</p>
  
  <p>Thanks for all the solutions!</p>