Nested append in javascript

Question

I want to wrap both select and button under one div <div class="row">. I have the below code working but unable to wrap it. I can't put <div class="row"> in static HTML and append it. Structure should be -

<div id="container" class="row">
<div class="row">

<select id="SelColid0" name="SelColid0">
</select>

<select id="nameid0" name="nameid0">
</select>

<button id="clearid0" title="Clear Filter">
<i class="far fa-trash-alt"></i>
</button>

</div> 
</div> 

$('#container')
      .append(
        $(document.createElement('select')).prop({
          id: "SelColid0",
          name: "SelColid0"
        })
      )
      .append(
        $(document.createElement('select')).prop({
          id: "nameid0",
          name: "nameid0"
        })
      )
      .append(
        $(document.createElement('button')).prop({
          id: "clearid0",
          innerHTML: '<i class="far fa-trash-alt"></i>',
          title : 'Clear Filter'
        })
      )
    

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

 <div id="container" class= "row"></div>

Select Column name Select Value

Answer 1

I think it's better use only jQuery or only js, in your case seems like you want use jQuery:

$('#container')
  .append(
    $('<div></div>').addClass("row")
    .append(
      $('<select></select>').prop({
        id: "SelColid0",
        name: "SelColid0"
      })
    )
    .append(
      $('<select></select>').prop({
        id: "nameid0",
        name: "nameid0"
      })
    )
    .append(
      $('<button></button>').prop({
        id: "clearid0",
        innerHTML: '<i class="far fa-trash-alt"></i>',
        title: 'Clear Filter'
      })
    )
  )

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="container" class="row"></div>

So instead of use document.createElement use directly $('whatyouneed')

---

If instead you wanted to use only pure JS:

const container = document.querySelector('#container');
const div = document.createElement('div');
div.classList.add('row');
let select1 = document.createElement('select');
select1.id = 'SelColid0';
select1.name = 'SelColid0';
div.append(select1);
let select2 = document.createElement('select');
select2.id = 'nameid0';
select2.name = 'nameid0';
div.append(select2);
let button = document.createElement('button');
button.id = 'clearid0';
button.innerHTML = '<i class="far fa-trash-alt"></i>';
button.title = 'Clear Filter';
div.append(button);
container.append(div);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="container" class="row"></div>

Answer 2

You can simply append your div and then append all the rest of your content to that

$('#container')
  .append(
    $(document.createElement('div')).addClass("row")
    .append(
      $(document.createElement('select')).prop({
        id: "SelColid0",
        name: "SelColid0"
      })
    )
    .append(
      $(document.createElement('select')).prop({
        id: "nameid0",
        name: "nameid0"
      })
    )
    .append(
      $(document.createElement('button')).prop({
        id: "clearid0",
        innerHTML: '<i class="far fa-trash-alt"></i>',
        title: 'Clear Filter'
      })
    )
  )

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

<div id="container" class="row"></div>