如何用另一個標簽包裹標簽？

Question

如何用另一個標簽包裹標簽？ 例如：

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

我想用b標簽包裝第二個li元素。 怎么做？

Answer 1

你是這個意思？

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

或者在Javascript中，假設這是頁面上唯一的ul。 您可能應該在上面放一個ID。

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

Answer 2

您可以輕松地做到這一點

//將被包裝的元素

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

//創建包裝容器

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

//在DOM樹中的el之前插入包裝器

el.parentNode.insertBefore(wrapper, el);

//將el移入包裝器

wrapper.appendChild(el);

代碼段

 // 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

將li標簽與ul或ol以外的其他標簽包裝在一起不是一個好習慣。 您前面有許多方法，但在下面可以找到其中兩個。 一個由css ，另一個由純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 ：如果您真的需要用b標簽包裝li元素，請嘗試其他答案。 （但是結構錯誤）