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>

POPULAR ONLINE

How to show text in viewport without having to scroll up?

RewriteEngine not working on Java Netbeans (Apache server)

How do I approach showing and hiding specific data fields from view when using database-modeling approach?

How similar two projects are? [on hold]

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

jQuery

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

jQuery

Stimulus nested (child) targets

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

102

jQuery

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