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>
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>
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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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
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
Is it possible (and is it appropriate) to use nested/child targets of parent target?
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: