jQuery prepend to a button element

Question

Hey all I have the following code that adds a dup button to my table:

.....[More code above].....
_createDeleteButton: function (a) {
  return this._createGridButton(this.deleteButtonClass, 
                                this.deleteButtonTooltip, function (b, c) {
     b.deleteItem(a), c.stopPropagation()
  })
},
_createGridButton: function (a, c, d) {
  var e = this._grid;
  //Creates the Dup button
  var r = $('<input/>').attr({
        type: "button",
        id: "field",
        value: 'new',
        class: "dup"
       }).on("click", function (a) {
           alert('hello');
       })

  //Creates the DELETE button
  return b("<input>").addClass(this.buttonClass).addClass(a).attr({
              type: "button",
              title: c
       }).on("click", function (a) {
           d(e, a)
       }).prepend(r);
},
.....[More code below].....

The end result looks like this:

Notice how the dup element is within the Delete element!

I've also tryed the following:

}).after(r);

Which doesnt have the dup element at all...

}).insertAfter(r);

And again it does not show the dup element...

}).before(r);

Still not showing the dup...

}).append(r);

Again this works but places dup into the incorrect place...

}).prepend(r);

And the same goes for this one as well..

//Creates the DELETE button
var a = b("<input>").addClass(this.buttonClass).addClass(a).attr({
        type: "button",
        title: c
}).on("click", function (a) {
        d(e, a)
});
return $(r).insertAfter(a);

Doesnt show the Delete element now but does show the Dup element...

So what am I doing incorrectly?? I'm looking to have it looks like this:

Answer 1

$("div").prepend("<input>") means insert input inside the element but at the beginning of it.

$("div").append("<input>") means insert input inside the element but at the end of it.

$("div").after("<input>") means insert the input right after the div

$("div").before("<input>") means insert the input right before the div

prependTo/appendTo and insertBefore/insertAfter they are the same as the above ones but the elemens are reversed , for example $("<input>").prependTo("div")

as i understand you want to insertAfter the delete button . if a is the delete button then $(r).insertAfter(a) should work

see example below where a is the p inside div .

maybe make a working snippet to see if your buttons are created properly because i cannot replicate your problem

 var r = $('<input/>').attr({
   type: "button",
   id: "field",
   value: 'new',
   class: "dup"
 }).on("click", function(a) {
   alert('hello');
 })
var a = $('div p')
$(r).insertAfter(a);

/* CASE STUDY */

body {
  margin: 0;
}

section#casestudy {
  height: 750px;
  max-width: 100%;
}

section#casestudy div.row {
  height: 250px;
  max-width: 100%;
  text-align: center;
  position: relative;
}

section#casestudy .four {
  position: relative;
  max-width: 100%;
  display: inline-block;
  margin: 0 auto;
}

#casestudy h4 {
  color: #000000;
  font-size: 20px;
  padding-top: 50px;
  line-height: 5px;
}

section#casestudy p {
  font-size: 10px;
  color: #bdc3c7;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

#council div.row {
  display: block;
  background-color: #d3d3d3;
  width: 960px;
}

#council img {
  float: right;
}

#council h2 {
  font-size: 20px;
  text-align: left;
  color: #000000;
}

#council div.row p {
  font-size: 10px;
  text-align: left;
  width: 50%;
}

.four h3 {
  position: absolute;
  color: #FFF;
  font-size: 20px;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section#casestudy img {
  display: block;
  margin-left: 20px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>
    Some text here
  </p>
</div>

Answer 2

Maybe it works with $(r).insertAfter("<delete button>").