I want append an input text in my html page. I use JQuery to do that.

My JQuery script :

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

And the HTML :

 <div class="isi">
    <div class="like-comment">
     <div class="kotak"></div>
     <div class="kotak-jumlah">
     </div>
     <div class="kotak"><button class="reply"></button></div>
   </div><div class="komentar-balasan"></div>

The Fiddle

I Don't know why, but instead of displayed the input text box. The browser just display <input type="text"></input>. It's like the browser didn't recognize the HTML code.

I want append an input text in my html page. I use JQuery to do that.

My JQuery script :

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

And the HTML :

 <div class="isi">
    <div class="like-comment">
     <div class="kotak"></div>
     <div class="kotak-jumlah">
     </div>
     <div class="kotak"><button class="reply"></button></div>
   </div><div class="komentar-balasan"></div>

The Fiddle

I Don't know why, but instead of displayed the input text box. The browser just display <input type="text"></input>. It's like the browser didn't recognize the HTML code.

• javascript
• jquery
• html
• append

4 Answers 4

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!

Remove the [0]. You are dereferencing your jQuery object by doing that.

This works: tempat.append('<input type="text"></input>');