0

次のようなJavascript(JQuery/AngularJS)で2つのHTML文字列をマージする最良の方法を見つけようとしています:

var context = '<html>
  <head>
  </head>
  <body>
     <ul id="list">
       <li>itemA</li>
       <li>itemB</li>
     </ul>
   </body>
</html>';

と合併:

var additionnalInfo = '<ul id="list">
       <li>itemC</li>
       <li>itemD</li>
     </ul>';

コンテキスト変数を次のように変更する必要があります:

'<html>
  <head>
  </head>
  <body>
     <ul id="list">
       <li>itemA</li>
       <li>itemB</li>
       <li>itemC</li>
       <li>itemD</li>
     </ul>
   </body>
</html>';

何か案が ？

4

1 に答える 1

0

追加情報に追加したい要素のみが含まれている限り、このようなことができるはずです（簡単に削除できます）。

var additionnalInfo = '<li>itemC</li>
                       <li>itemD</li>';

var list = getElementById('list');
list.innerHTML += additionalInfo;

編集

複数の ID で一致させる必要がある場合は、jQuery を使用して、型のすべての要素 (たとえば、すべてのリスト) を反復処理し、ID が等しいかどうかを確認してから、上記のように追加することができます。元：

var additionalInfo = $.parseHTML('<ul id="list"><li>itemC</li><li>itemD</li></ul>');
var elements = additionalInfo.find($('ul'));
var lists = $('ul').get();

elements.each(function(){
    var el = this;
    lists.each(function(){
        if($(this).attr('id') == el.attr('id')){
            el.innerHTML += $(this).innerHTML;
        }
});

これを行うにはもっと効率的な方法がありますが、必要なものの良い基礎になるはずです。基本的に、追加の html 内のすべての「親」リスト要素をループするだけです。これらの ID を既存の html 内のリスト ID と比較し、それらが同じ場合は、新しい innerHTML を既存のリストに追加します。

また、HTML 文字列を解析したら、id を持つ任意の要素の型を取得し、その型の検索を行うように、より一般的なものにすることもできます。これを行うには多くの方法がありますが、大量のサイクルを無駄にすることなく、データを反復処理する適切な方法を適用するだけです。これがもう少し役立つことを願っています。

于 2013-07-18T14:49:21.823 に答える