0

現在、AJAX 呼び出しを含むいくつかのアプリに取り組んでおり、JSON 形式を使用してサーバーからデータを取得しています。各ページは JSON 応答に基づいてコンテンツを作成する必要があり、現在次のようなコンテンツを作成しています。

function createBox1(json) {
   var bigbox = document.createElement('div');
   bigbox.className = 'class1';

   var firstbox = document.createElement('div');
   firstbox.className = 'first-box';

      var firstNestedBox = document.createElement('div');
      var secondNestedBox = document.createElement('div');
      var thirdNestedBox = document.createElement('div');
   var secondbox = document.createElement('div');
...

つまり、基本的にはちょっと長いコードなので、もっと良い方法があるかどうか知りたいと思っていました。

PS：次のようなことをするライブラリを見てきました：

function o(t,e){var i=document.createElement(t||"div"),o;for(o in e)i[o]=e[o];return i}

それが複数の div 要素を作成する方法だと思いますが、それがどのように機能するかはわかりません。

前もって感謝します （：

4

1 に答える 1

0

あなたのやり方に問題はありませんが、新しいものを作成する代わりに空のdivを複製する方が速く、マークアップを構築するときにフラグメントを使用し、すべてが構築されたらフラグメントをDOMに挿入する方が高速ですDOMなどに各要素を挿入する代わりに

より短いコードを作成するためだけに関数を使用できますが、実際には不要な関数呼び出しにすぎません。

function createBox1(json) {
   var div             = document.createElement('div'),
       bigbox          = div.cloneNode(false),
       firstbox        = div.cloneNode(false),
       firstNestedBox  = div.cloneNode(false),
       secondNestedBox = div.cloneNode(false),
       thirdNestedBox  = div.cloneNode(false),
       secondbox       = div.cloneNode(false):

   bigbox.className = 'class1';
   firstbox.className = 'first-box';

...
于 2013-04-06T19:11:06.247 に答える