将 jQuery 附加到 JavaScript 的本机

Question

我想将原生JavaScript用于jQuery的.append()函数

$('.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 1

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

您要求在可能需要.prepend()的地方.append()（因为您尝试在前面加上较低的值），因此您应该分别使用"afterbegin"而不是"beforeend"

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>