使用JavaScript注入HTML

Question

i have this in my view:

 <div class="grid_12">
<div class="box tabbed news" id="box1">
   <div class="header">
    <h3>
       <%: Model.News.Title %> 
    </h3>
  </div>
  <div class="content" id="newsItem">
    <% Html.RenderPartial("NewsItem", Model); %>
  </div> 
  <div class="clear"></div>
 </div>
 </div> <!-- End of .grid_12 -->

 <div class="clear"></div>
 <table id="table2">

 </table>
 <div class="grid_12">
 <div class="box tabbed news" id="box2">
   <div class="content" id="testdiv">
     <table id="table">
       <tr>
         <td>
           <a href="javascript:ShowReplyTextArea();" class="button">Reply</a>
         </td>
         <td>
           <a href="javascript:ReplyPost(<%: Model.News.NewsId %>);" class="button" id="post_button">Post</a>
         </td>
       </tr>
     </table>
    </div>
  </div>
</div>
<div class="clear"></div>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="ScriptPlaceHolder" runat="server">
<script type="text/javascript">
 function ShowReplyTextArea() {
   div = document.getElementById('testdiv')
   textArea = document.createElement("textarea");
   textArea.setAttribute('rows', 20);
   textArea.setAttribute('cols', 149);
   textArea.setAttribute('id', "textarea");

   div.appendChild(textArea);
 }

 function ReplyPost(newsId) {
   var message = $("#textarea").text();
   if (message != null)
     $("#post_button").show();
   var jqxhr = $.getJSON("<%= Url.Action("ReplyPost", "Home", new { area = "News" }) %>?newsId=" + newsId + "&message=" + message, function (data) {
   });

   divtext = document.getElementById('table2');
   divtext.setAttribute('text', message);
 }
</script>

when i click on the reply button my text area pops up, i typed in some news and click on the post button. I need to display what i just typed underneath the grid_12 div. the textarea must then be hidden again until i click on reply again

I am struggeling to make this work. can someone help please?

Answer 1

Add some div to display value and use jQuery in MVC3 you can use jQuery out of the box. When you use $("#id") you select item by id, much like getElementById but it is wrapped set of jQuery with which you can do much more than selecting it normally.

new div for displaing

<div id="displayArea"></div>

some jQuery code to put in onClick:

$("#textArea").hide();
$("#displayArea").innerText = $("#textArea").val();