It's because tempat[0] is accessing the underlying DOM node rather than the jQuery wrapper. It works fine if you omit the array access and just call append on tempat.

You don't need it here but the right way to get a jQuery wrapped element of a jQuery selector list is to use eq

The problem is that you aren't calling the append element on a jQuery object (which treats strings as HTML), but instead on a native DOM element. The experimental ParentNode#append method treats strings as text, so you are seeing text.

If you omit the [0] before calling append, your code runs perfectly:

$(document).ready(function() {
  $("#post-komentar").click(function() {
    console.log($(this).siblings('.editor-komentar').val());
  });
  $(".reply").click(function() {
    var tempat = $(this).parent().parent().next(".komentar-balasan");
    console.log(tempat[0]);
    var html =
      tempat.append('<input type="text"></input>');
  });
});

.reply {
  background-color: #fff;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="isi">
  <div class="like-comment">
    <div class="kotak">&lt;</div>
    <div class="kotak-jumlah">
    </div>
    <div class="kotak"><button class="reply"></button></div>
  </div>
  <div class="komentar-balasan"></div>

Hello,

Check if this is what you need:

You need to create an element and only then add it.

Here is an example:

      $(document).ready(function(){
        $(".reply").click(function(){
          var tempat=$(this).parent().parent().next(".komentar-balasan");
          console.log(tempat[0]);
          var newEl = document.createElement('input');
          newEl.type = "text";
          tempat.append(newEl);
        });
      });

I hope I have helped!