TRIKI_Sami TRIKI_Sami - 6 months ago 19
jQuery Question

Append jQuery toJavaScript's native

I wanted to use native JavaScript for jQuery's

.append()
function



$('.edge select').append('<option val="1">One</option>');
// How to do the above in plain JS ?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="gridMT_pageBar_bottom_changeItemPerPage" class="edge">
<select onchange="SweetDevRia.$(&#39;gridMT&#39;).changeItemPerPage(this.value);">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100" selected="selected">100</option>
</select>
/page
</div>




Answer

document.querySelector(".edge select").insertAdjacentHTML('beforeend', '<option val="1">One</option>');
<div class="edge">
  <select></select>
</div>

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

You asked for .append() where probably you needed .prepend() (since you're trying to prepend a lower value) therefore instead of "beforeend" you should use respectively "afterbegin"

var SELECT = document.querySelector(".edge select");
SELECT.insertAdjacentHTML('afterbegin', '<option val="1">1</option>');
<div id="gridMT_pageBar_bottom_changeItemPerPage" class="edge">
  <select onchange="SweetDevRia.$(&#39;gridMT&#39;).changeItemPerPage(this.value);">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100" selected="selected">100</option>
  </select>
  /page
</div>