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>