改行を取得する方法

Question

私は、変更イベントが発生したときに別のdivのチェックボックスの横にあるコンテンツをコピーしようとしていました。私はほとんどそれをやったが、私は別の部門で改行を得ることはできません。ここに私のコードは次のとおりです。

これは、私はこれは私が私のjqueryのコードは次のようになり

<div id="myDiv"></div> 

にコピーしたいdiv要素である

<div> 
    <input type="checkbox"/><label for="1">One</label><br> 
    <input type="checkbox"/><label for="2">Two</label><br> 
    <input type="checkbox"/><label for="3">Three</label><br> 
    <input type="checkbox"/><label for="4">Four</label><br> 
</div> 

からコピーしたいのdivです：

$(":checkbox").change(function() { 
      var arr = $(":checkbox:checked").map(function() { 
      return $(this).next().text(); 
      }).get(); 
      $("#myDiv").text(arr.join(' ')); 
      }); 

また、この全体のjqueryコードを実行するための代替方法がある場合、私は確かに知りたいと思います。

ありがとうございます。

あなたがすべき

Answer 1

：ここ

$("#myDiv").html(arr.join('<br>')); 

.text()機能を使用してexample

は、その特定場合は、あなたの特殊文字をエスケープしますが、 .html()機能するわけではない

Answer 2

textをhtmlに変更し、<br>をご使用の01に変更することができますコール（ただし、読み続ける）：

$(":checkbox").change(function() { 
    var arr = $(":checkbox:checked").map(function() { 
     return $(this).next().text(); 
    }).get(); 
    $("#myDiv").html(arr.join('<br>')); 
    // ---------^^^^-----------^^^^ 
}); 

しかし、あなたのチェックボックスのラベルのテキストはその中の任意の<や&を持っていないことが起こるためにのみ機能します。もしそうなら、問題になるでしょう。任意の<または&が正しく処理されるように

より堅牢なソリューションは、ラベルの代わりに、テキストのHTMLをつかむ：

$(":checkbox").change(function() { 
    var arr = $(":checkbox:checked").map(function() { 
     return $(this).next().html(); 
    // -----------------------^^^^ 
    }).get(); 
    $("#myDiv").html(arr.join('<br>')); 
    // ---------^^^^-----------^^^^ 
}); 

ライブたとえば、ラベルがエスケープ（とと証明するように変更して質問に私のコメントから、二つの "サイドノート"）は、同様に対処：

$(":checkbox").change(function() { 
 
    var arr = $(":checkbox:checked").map(function() { 
 
     return $(this).next().html(); 
 
    }).get(); 
 
    $("#myDiv").html(arr.join('<br>')); 
 
});

<div> 
 
    <input id="c1" type="checkbox"/><label for="c1">&lt;One></label><br> 
 
    <input id="c2" type="checkbox"/><label for="c2">&lt;Two></label><br> 
 
    <input id="c3" type="checkbox"/><label for="c3">&lt;Three></label><br> 
 
    <input id="c4" type="checkbox"/><label for="c4">&lt;Four></label><br> 
 
</div> 
 
<div id="myDiv"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>