如何在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）

，但如果我嘗試使用wrap()方法用下面的代碼：

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

我不能獲得此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());