代码段

Question

如何用另一个标签包装标签？例如：

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

我想用li标记包装第二个b元素。怎么做？

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>";

P.S ：如果您确实需要使用li标记包裹b元素，请尝试其他人的答案。（但这是错误的结构）

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

3 个答案:

代码段