Nested append in javascript

148
March 12, 2022, at 5:30 PM

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

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>

Answer 2

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>

Rent Charter Buses Company
READ ALSO
Is there a way to show an element if it has all of the classes matched from an array that is consistently having variables pushed in and out of it?

Is there a way to show an element if it has all of the classes matched from an array that is consistently having variables pushed in and out of it?

I'm creating a sorting program for DnD spells that sorts all 318 spells into 83 different categoriesI have multiple arrays storing all of the information, and I know how to check if an element has a class from an array

162
How can I include the 0 within the results in this canonical search form?

How can I include the 0 within the results in this canonical search form?

I have a lottery search form which concatenate six input fields into a single value and returns the results based on the positionMy form works correctly for numbers 1-9, but it is unable to display results when I search for 0

130
Stimulus nested (child) targets

Stimulus nested (child) targets

Is it possible (and is it appropriate) to use nested/child targets of parent target?

102
How can I refresh the ProtonMail web inbox page once with Tampermonkey?

How can I refresh the ProtonMail web inbox page once with Tampermonkey?

I have multiple ProtonMail accounts, and am trying to add an avatar to replace the default first letter of my name in the upper right hand corner of the ProtonMail web interface so I can more easily differentiate which inbox I'm in, like this:

169