附加到DOM

Question

我試圖以某種方式追加評論系統中ajax文章的結果。 我嘗試了很多不同的方式，但他們似乎都以某種方式失敗。

的意見的HTML是：

@using (Html.BeginForm()) 
{ 
    <ul class="commentList"> 
    @foreach (var comment in Model) 
    { 
     <li> 
      <a href="http://www.google.com"><img src='@Url.Content("~/Images/User.png")' alt="User" /></a> 
      <div class="commentBody"> 
       <a href="http://www.google.com">@comment.UserName </a> 
       <span>@comment.CommentText </span> 
       <div> 
        <abbr title='@comment.CommentDate '>@comment.CommentDate.ToString("dd. MMMM HH:mm")</abbr> 
        <a href="#" class="likar">Like</a> 
       </div> 
      </div> 
     </li> 
    } 
     <li class="commentAdd"> 
      <textarea id="CommentText" name="CommentText" rows="3" cols="20"></textarea> 
      <label> 
       <input type="submit" value="Write comment" /> 
      </label> 
      @Html.ValidationMessage("CommentText") 
     </li> 
    </ul> 
} 

這裏是我的腳本：

$('input[type="submit"]').click(function(event){ 

    // Prevent the default behaviour. 
    event.preventDefault(); 
    var form = $(this).parent(); 
    var PostComment = { "comment": $("#CommentText").val() }; 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "/Home/AddComment/", 
     data: JSON.stringify(PostComment), 
     dataType: "json", 
     success: function (data) { 
      var commentEntry = $('<li/>'); 
      commentEntry.append('<a href="http://www.ru.is"><img src=\'@Url.Content("~/Images/User.png")\' alt="User" /></a>'); 
      var diver = $('<div/>').addClass('commentBody'); 
      diver.append('<a href="http://www.google.com">').text(data.name).append('</a>'); 
      diver.append($('<span/>').text(data.comment)); 
      var diver2 = $('<div/>'); 
      diver2.append('<abbr title=\' '); 
      diver2.append().text(data.timeOf); 
      diver2.append('\'>'); 
      diver2.append().text(data.timeOf); 
      diver2.append('</abbr><a href="#" class="likar">Like</a>'); 
      diver.append(diver2); 
      commentEntry.append(diver); 
      $(".commentAdd").before(commentEntry); 
      // reset the form. 
      form[0].reset(); 

     }, 
     error: function (xhr, err) { 
      // Note: just for debugging purposes! 
      alert("readyState: " + xhr.readyState + 
      "\nstatus: " + xhr.status); 
      alert("responseText: " + xhr.responseText); 
     } 
    }); 
}); 

PostComment類是這樣的：

public class PostComment 
{ 
    public string comment { get; set; } 
    public string name { get; set; } 
    public string timeOf { get; set; } 
} 

是這樣設置的時間在HomeController中 - AddComment

c.timeOf = DateTime.Now.ToString("yyyy-dd-MM HH:mm:ss"); 

其中c是PostComment類的實例。

我根本無法得到正確的追加方法。如果我像這樣使用它，那麼我的appen date.name行不會將「a href」元素添加到DOM。 任何想法？因爲我已經嘗試了我所能做到的並且沒有想法。

Answer 1

你不能按照你的方式使用.append()。您可以附加唯一完整的元素，不關閉標籤：

你可以嘗試這樣的：

success: function(data) { 

    var diver2 = $('<div>') 
     .append($('<abbr>').attr('title', data.timeOf)) 
     .append('<a href="#" class="likar">Like</a>'); 

    var diver = $('<div>').addClass('commentBody') 
     .append('<a href="http://www.google.com">' + data.name + '</a>') 
     .append($('<span>').text(data.comment)) 
     .append(diver2); 

    var commentEntry = $('<li>') 
     .append('<a href="http://www.ru.is"><img src=\'@Url.Content("~/Images/User.png")\' alt="User" /></a>') 
     .append(diver); 

    $('.commentAdd').before(commentEntry); 

    // reset the form. 
    form[0].reset(); 
} 

注意使用.attr()方法來設置<abbr>元素的「title」屬性。