使用jQuery或Javascript添加<span>标签？

Question

有没有办法在使用jQuery或Javascript的<span>标签中包装文本的最后一行？

#myspan{ 
 
    color: #db1926; 
 
}

<div id="myDiv">Here is some text, of which I want the last line to be wrapped in span-tags with id="myspan".<br>If it works this line will color red. 
 
</div>

Answer 1

这具体的例子是很容易的，因为目标文本节点是其父的最后一个孩子;看评论：

// Create the span, give it its ID 
 
var span = document.createElement("span"); 
 
span.id = "myspan"; 
 

 
// Get the div 
 
var div = document.getElementById("myDiv"); 
 

 
// Move the last child of the div into the span 
 
span.appendChild(div.childNodes[div.childNodes.length - 1]); 
 

 
// Append the span to the div 
 
div.appendChild(span);

#myspan{ 
 
    color: #db1926; 
 
}

<div id="myDiv">Here is some text of which I want the last line to be wrapped in span-tags with as id="myspan".<br>If it works this line will color red. 
 
</div>

或者使用jQuery：

// Create the span, give it its ID 
 
var span = $("<span>").attr("id", "myspan"); 
 

 
// Get the div 
 
var div = $("#myDiv"); 
 

 
// Move the last child of the div into the span 
 
span.append(div.contents().last()); 
 

 
// Append the span to the div 
 
div.append(span);

#myspan{ 
 
    color: #db1926; 
 
}

<div id="myDiv">Here is some text of which I want the last line to be wrapped in span-tags with as id="myspan".<br>If it works this line will color red. 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

由于A.Wolffpoints out，即可以使用短一个很多：

$("#myDiv").contents().last().wrap('<span id="myspan"></span>');

#myspan{ 
 
    color: #db1926; 
 
}

<div id="myDiv">Here is some text of which I want the last line to be wrapped in span-tags with as id="myspan".<br>If it works this line will color red. 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

参见：

• DOM4
• jQuery documentation