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

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元素，请尝试其他答案。 （但是结构错误）