jQueryの - JavaScriptでのハードコーディングHTML - 動的にDOM要素を作成するための良い方法はありますか？

StackOverflow https://stackoverflow.com/questions/920114

  •  06-09-2019
  •  | 
  •  

質問

私は大量のメッセージ、および生のHTMLを持っているような私の私のjavascriptのコードでハードコード、：

    var subjectId = $(subject).attr('subjectId'); 
    var subjectName = $(subject).attr('subjectName'); 
    var html = "<table id='invitations' class='invitations' width='100%'><tbody>";
    $(subject).find('group').each( function() {     
        var groupId = $(this).attr('groupId');
        var groupName = $(this).attr('groupName');
        var ownerId = $(this).attr('ownerId');
        var owner = findStudentNameById( subjectId, ownerId );
        html += "<tr>" +
                    "<td width='55px'><img src='images/gplg.png' /></td>" +
                    "<td>" + subjectId + " <span class='subjectName'>" + subjectName + '</span> <br /> '  + groupId + 
                    " - <span class='group'>" + groupName + "</span><br /> Created By "  + owner + "</td>" +
                "</tr>" +
                "<tr>" +
                    "<td width='55px'></td>" +
                    "<td><img class='accept' src='images/accept.png' />" +
                        "<img class='decline' src='images/decline.png' /> " +
                    "</td>" +
                "</tr>";                    
    });
    html += "</tbody></table>";
    return html;

や... 

$('#inviteform').submit( function (){
            var invitesSent = false;
            var html = '<h3>Invitations have been sent to the following people</h3><br /><ul>';
            $('#inviteform').find('input:checkbox').each( function() {
                if ( $(this).is(':checked')){
                    html += '<li>+ <a href="#">' + $(this).val() +'</a></li>';
                    invitesSent = true;
                }
            });
            html += '</ul>';

            if ( !invitesSent ){
                html = '<h3>You did not select any invitees, no invitations have been sent.</h3>';
            }

            $('#content').hide().fadeOut(2000);
            $('#content').html(html).slideDown("slow");
            $('#slogan').html('Congratulations! Your group is now complete. ').fadeIn(2000);

            return false;
        });
私はその場での内容を変更する必要があるページ（すなわちタイトルのdiv、およびコンテンツのdiv）の2つの主要分野を持っているので、

このです。残念ながら、私は別のファイルにこのコンテンツを分離傾けます。

ですから、これらのdivのテキストとDOM要素を作成する代わりに、ハードので、多くのものをコーディング背後のベストプラクティスがあります。

Imは最もエレガントな解決策を探していたので、私はそんなにハードコーディングしていません。

おかげ

役に立ちましたか？

解決

これはHTML文字列をハードコーディングするあなたを奨励する方法は私のペットの1 jQueryを使って嫌いです。

私は、一般的にちょうど標準のJavaScriptを使用して終了：document.createElement('TD')

あなたはそれがそれらをキャッシュし、新しいノードを作成するためにcloneNode(true)を使用する方が速い/最善だ同じタイプのノードの多くを作成している場合：

var nodeCache;
    nodeCache.td = document.createElement('TD')

var newTD = nodeCache.td.cloneNode(true);

私はjQueryのこのmakeingされていない多くの使用を理解するが、私はこれを処理するjQueryの方法は無粋だと思います。

他のヒント

あなたは、テンプレートライブラリをご覧ください。 jQueryのテンプレートエンジンの

あなたは、DOM要素を作成するために、jQueryのセレクタを使用することができます。たとえば、

$('<table>')

は、あなたが、その後に属性を設定して、DOMに追加することができ、テーブル要素を作成します。

$('<table id="invitations" class="invitations" width="100%">')
    .append('<tbody>')
    .appendTo(selector);
    // etc

1つの選択肢は、DOMの構築に追加（）、addClass（）、CSS（）、ATTRIB（）および他のjQueryの方法を使用することです。チェーンは、コードをよりエレガントになります。これは、特に小さなDOMツリーのために、うまく動作します。

あなたは大きなDOMツリーが必要な場合は、

、サーバーからそれらを取得するためにAJAXのメソッドを使用する方が良いでしょう。あなたは、動的に生成されたデータを渡すためにあなたのコードを適応する必要があります。

また、あなたはHTMLとJavaScriptコードを再設計検討することができます。あなたは、例えば、HTMLのDOMツリーを入れて、（CSSやJavaScriptを使用して）それを隠すことがあります。あなたは、動的に生成されたデータを追加した後、あなたはそれを示すことができました。これは、ビューの懸念点の分離からはるかに優れています。

AJAX経由でHTMLを取得してください。

この依存関係を壊し、JavaScriptとHTMLを分離されます。

ユーザーコントロールを呼び出すためのAjaxを使用するとよいでしょう。

あなたがHTMLユーザーコントロール内のすべてのあなたのマークアップを行うことができますこの方法。

私の愚見でます。

あなたのケースでは、私はマークアップからのメッセージを分けると思います。あなたは、

のように、ページ内の空のhtmlの足場を持つことができます 
...<div id="feedback" style="display:none;"><h3 class="headline"></h3><p class="message"></p>...

以降にjQueryを使用して、それを移入。このように、あなたは非常に国際化が容易になり、外部の.jsファイルにすべてのユーザーメッセージをリファクタリングできます。

ところで、私はjQueryのテンプレートエンジンをお勧めすることはできません。どちらか彼らはあなたが（jTemplatesのように）本当に厄介な構文を使用するように強制する、またはそれらを単純な要素クローニングにあなたを制限します。私見あなたはほとんど常に.clone（）メソッドを使用してオフに優れています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top