要素をHTML文字列にラップする方法var？

Question

私は次のコードを使用している場合：

var output = '<div class="info"><span class="bus-number">468 (58247)</span></div>'; 
var span = $(output).find('span.bus-number').text(); 
console.log(span); 

を、私は、コンソールで

468（58247）

値を見ることができますが、私が使用しようとすると

var output = '<div class="info"><span class="bus-number">468 (58247)</span></div>'; 
$(output).find('span.bus-number').wrap('<b></b>'); 
console.log(output); 

のコードを持つ wrap()メソッド

私は、このHTMLコードを取得することはできません。

<div class="info"><b><span class="bus-number">468 (58247)</span></b></div> 

がどのように私は包まれた要素を持つ文字列を取得することができますか？

Answer 1

あなたは、文字列を更新していませんjQueryオブジェクトを更新するだけで、html()メソッドを使用してjQueryオブジェクトからHTMLコンテンツを取得します。

var output = '<div class="info"><span class="bus-number">468 (58247)</span></div>'; 
 
// create a div element with html content 
 
output = $('<div/>', { 
 
    html: output 
 
     // get span 
 
    }).find('span.bus-number') 
 
    // wrap the span 
 
    .wrap('<b></b>') 
 
    // back to previous selector 
 
    .end() 
 
    // get the html content 
 
    .html(); 
 

 
console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

やDOM要素のouterHTMLプロパティを使用します。

var output = '<div class="info"><span class="bus-number">468 (58247)</span></div>'; 
 
// create jQuery object 
 
output = $(output) 
 
    // get span element 
 
    .find('span.bus-number') 
 
    // wrap span with b 
 
    .wrap('<b></b>') 
 
    // back to previous selector and get dom object 
 
    // using [0] after get html content from dom 
 
    .end()[0].outerHTML; 
 

 
console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

html()機能を使用できます。

html()関数は要素の内部HTMLを返しますので、あなたがHTMLを取得するために別の要素でそれをラップする必要があることに注意：

var output = '<div class="info"><span class="bus-number">468 (58247)</span></div>'; 
 
var span = $(output).find('span.bus-number').text(); 
 
console.log(span); 
 

 
var span = $(output).find('span.bus-number').wrap('<b></b>'); 
 
console.log(span.parent('b').html()); 
 
console.log(span.parents('div.info').html()); 
 
console.log($('<div>').append(span.parents('div.info')).html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

outputは不変である単なる文字列ですので。 たとえば、あなたのコードの

var output = '<div class="info"><span class="bus-number">468 (58247)</span></div>'; 
$output = $(output); 
$output.find('span.bus-number').wrap('<b></b>'); 
console.log($output.text());