HTMLを動的に挿入する適切な方法は何ですか？

Question

私は等chatbox（簡易版）を有する：私はジャバスクリプト

に格納されたHTMLの静的ブロックを付加する機能を有する

 <!-- Chat Container --> 
     <div id="chat-window"> 
      <div class="message-container"> 
       <!-- Begin messages --> 

       <!-- End messages --> 
      </div> 
     </div> 

は、コードのブロックを前記：

 var messageTemplate = 
     '<!-- Begin message -->' + 
     '<div id="message">' + 
     '<div id="message-name">' + name + '</div>' + 
     '<div id="message-division" class="badge">' + division + '</div>' + 
     '<div id="message-time"><i class="fa fa-clock-o" aria-hidden="true"></i><abbr class="timeago" title="' + time + '">' + time + ' </abbr> </div>' + 
     '<div id="message-content">' + 
     '<div id="message-tag" class="label label-primary">' + tag + '</div>' + 
     '<div id="message-text">' + 
     text + 
     '</div>' + 
     '</div>' + 
     '<hr>' + 
     '</div>' + 
     '<!-- End message -->'; 

Jqueryがこれを私に追加しますmessages-container

しかし、私はこれを行うためにはるかにクリーンな解決策があると感じます。見つけることができませんでした。

誰かが、引用されたJavaScriptでこれらのオブジェクトを事前に定義することなく、新しいオブジェクトをWebページに挿入するための正しい方向を教えてもらえますか？

Answer 1

もっと正式なテンプレートエンジンを探すことを提案している人もいますが、ユースケースはかなりシンプルです。これを機能的に行うには、createElement（）、attr（）、およびtext（）などのJQueryメソッドを使用するだけです。ここでは、newDiv関数でラップされたこのアプローチが、ここで必要な主要なものだと思われます。これは、渡したIDを追加し、div要素をnewDiv（）の2番目のパラメータの子として作成します。テキストを追加するようなもの以外のものは、newDiv関数の結果に連鎖することができます。 [JavaScriptでHTML要素を挿入]の

var name = "foo"; 
var division = "bar"; 

// this is your parent element 
var message = newDiv("message",$(".message-container")); 

// here are your children, add as many as you want: 
newDiv("message-name",message).text(name); 
newDiv("message-division",message).text(division); 

function newDiv(id,parent) { 
    var element = document.createElement("div"); 
    $(element).attr("id",id); 
    parent.append(element); 
    return $(element); 
}