jQuery prepend() 和 Append() 不起作用，出了什么问题

Question

My jquery

var proQty = $(".quantitybox");
proQty.prepend('<span class="dec changebtn">-</span>');
proQty.append('<span class="inc changebtn">+</span>');
proQty.on('click', '.changebtn', function () {

My HTML code

<div class="cart-modal-price">
    <p>Fruits</p>
    <p>Price: Ksh. 120/-</p>
    <input type="number" class="quantitybox" placeholder="1">
</div>

Answer 1

Try this.

 var proQty = $(".quantitybox"); proQty.prepend('<span class="dec changebtn">-</span>'); proQty.append('<span class="inc changebtn">+</span>');

 <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <div class="cart-modal-price"> <p>Fruits</p> <p>Price: Ksh. 120/-</p> <span class="quantitybox"><input type="number" placeholder="1"></span> </div>

Answer 2

You are searching for before() and after()

 var proQty = $(".quantitybox"); proQty.before('<span class="dec changebtn">-</span>'); proQty.after('<span class="inc changebtn">+</span>');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cart-modal-price"> <p>Fruits</p> <p>Price: Ksh. 120/-</p> <input type="number" class="quantitybox" placeholder="1"> </div>

Answer 3

Your code didn't work because (as per comment from Andreas )

"The .prepend() method inserts the specified content as the first child of each element in the jQuery collection", "The .append() method inserts the specified content as the last child of each element in the jQuery collection" - An <input /> element has no children.

You should be using https://api.jquery.com/after/ & https://api.jquery.com/before/ .

after : Insert content, specified by the parameter, after each element in the set of matched elements.

before : Insert content, specified by the parameter, before each element in the set of matched elements.

 var proQty = $(".quantitybox"); proQty.before('<span class="dec changebtn">-</span>'); proQty.after('<span class="inc changebtn">+</span>');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div class="cart-modal-price"> <p>Fruits</p> <p>Price: Ksh. 120/-</p> <input type="number" class="quantitybox" placeholder="1" /> </div>