CODEWITHSUNDEEP
jquery
joe
joe

Reputation: 69

append preexistent div with data to container jquery

I have a hidden li or maybe I would need to create one

HTML

  <li class="instant_comment">
     <div class=image><a href='/channel'><img src='/fr43/prof.jpg' /></a></div>
       <div class=post>[What I comment]</div>
      </li>


 <form>
    <textarea id=textarea></textare>
    <input type=submit value='answer' id=Comment />
 </form>

So anytime I write a new comment, and click on the comment button, It appends the preexistent li.instant_comment into the #MyComments container. So I dont have to pass my profile picture, id_user, channel name, tokens etc by the form. and append it.

JQUERY So, something like this

  $("#comment").on("click",function(){

     $(".post")=$("#textarea").val();//add my content to the div
      $("#MyComments").append.(".instant_comment");//append this content to the ul

        });

Is it possible?

Upvotes: 0

Views: 26

Answers (2)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

If I understood your question right, you will find the below solution helpful. Please take note that the form is not submiting at the moment because I have added e.preventDefault() in the function. You may use AJAX to submit your form.

$("#comment-form").on("submit", function(e){
  e.preventDefault();
  var textValue = $("#text-area").val();
  var myComment = "<li class='instant_comment'><div class=image><a href='/channel'><img src='/fr43/prof.jpg' /></a></div><div class=post>"+textValue+"</div></li>";
  $(this).after(myComment);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="comment-form">
    <textarea id="text-area"></textarea>
    <input type=submit value='answer' id="Comment" />
 </form>

Hope this helps

Upvotes: 1

SINGH
SINGH

Reputation: 397

You can try with creating li html from js and append to parent container.

 var comment= $("#textarea").val();
 var newLi = "<li class='instant_comment'><div class='image'><a href='/channel'><img src='/fr43/prof.jpg' /></a></div><div class=post>" + comment + "</div></li>";
 $('#MyComments').append(newLi);

Upvotes: 0

Related Questions