Quiero envolver tanto la select como el button debajo de un div <div class="row"> . Tengo el siguiente código funcionando pero no puedo envolverlo. No puedo poner <div class="row"> en HTML estático y agregarlo . La estructura debe ser -
<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>Simplemente puede agregar su div y luego agregar todo el resto de su contenido a ese
$('#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>Creo que es mejor usar solo jQuery o solo js, en tu caso parece que quieres usar 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> Entonces, en lugar de usar document.createElement use directamente $('whatyouneed')
Si, en cambio, quisiera usar solo JS puro:
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>