如何將元素包裝在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()函數返回該元素的INNER 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());