如何用另一个标签包裹标签？

Question

How to wrap tag by another tag? For example:

<ul>
  <li>Html Tutorial</li>
  <li>Mongodb Tutorial</li>
  <li>Python Tutorial</li>
</ul>

I want to wrap second li element with b tag. How to do that?

Answer 1

You mean this?

<li><b>Mongodb Tutorial</b></li>

Or In Javascript, assuming this is the only ul on the page. You should probably put an ID on it.

var middleOne = document.querySelectorAll( 'ul > *' )[1];
middleOne.innerHTML = "<B>" + middleOne.innerHTML + "</B>";

Answer 2

you can easily do this

// element that will be wrapped

var el = document.querySelector('li:nth-child(2)');

// create wrapper container

var wrapper = document.createElement('b');

// insert wrapper before el in the DOM tree

el.parentNode.insertBefore(wrapper, el);

// move el into wrapper

wrapper.appendChild(el);

Code Snippet

 // element that will be wrapped var el = document.querySelector('li:nth-child(2)'); // create wrapper container var wrapper = document.createElement('b'); // insert wrapper before el in the DOM tree el.parentNode.insertBefore(wrapper, el); // move el into wrapper wrapper.appendChild(el); 

 <ul> <li>Html Tutorial</li> <li>Mongodb Tutorial</li> <li>Python Tutorial</li> </ul> 

Answer 3

Wrapping li tag with another tag except ul or ol is not a good practice. You have many approach ahead but in below you can find two of them. One by css and the another one with pure js .

CSS :

ul li:nth-of-type(2) {font-weight:bold;}
/* or */
ul li:nth-child(2) {font-weight:bold;}

JS :

var ul = document.getElementsByTagName("ul")[0];
var nth = ul.getElementsByTagName("li")[1];
nth.innerHTML = "<b>"+ nth.innerHTML +"</b>";

PS : If you really need to wrapp li element with b tag try others answers. (but it is wrong structure)