使用 Javascript/Jquery 在 P 标签内添加一个 SPAN

Question

我有一个带有“价格”类的段落标签，我想使用 Javascript、Jquery 或两者在其中添加一个 span 标签。

例如

之前： 

之后： Sale

我怎样才能做到这一点？

Answer 1

您可以执行以下操作：

$("p.price").append($(`<span class="whatever">Sale</span>`));

Answer 2

这是纯 JavaScript 代码

 function addSpan() { var price = document.getElementsByClassName('price')[0]; var span = document.createElement('span'); span.classList.add('whatever'); span.innerText = 'Sale'; price.appendChild(span); } addSpan();

 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p class="price"></p> </body> </html>

您也可以通过传递参数使方法更通用。

Answer 3

要将它添加到第一个.price元素中，不使用 jQuery：

document.querySelector(".price").insertAdjacentHTML(
    "beforeend",
    "<span class='whatever'></span>"
);

使用 jQuery：

$(".price").first().append("<span class='whatever'></span>");

如果你知道只有一个，你可以省略.first() 。

Answer 4

如果需要香草javascript：

 var lcs_els = document.getElementsByClassName('price'); for(var key in lcs_els){ lcs_els[key].innerHTML = '<span class="whatever">Sale</span>'; }

 <p class="price"></p>

如果需要jQuery：

 $('.price').html('<span class="whatever">Sale</span>');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="price"></p>

Jquery 变体 2 如果需要操作跨度：

 var span = $('<span/>').attr('class', 'whatever').html('Sale'); $('.price').append(span);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="price"></p>

使用 Javascript/Jquery 在 P 标签内添加一个 SPAN

问题描述

4 个解决方案

解决方案1
1 已采纳 2020-01-12 15:25:41

解决方案2
1 2020-01-12 15:26:52

解决方案3
0 2020-01-12 15:28:26

解决方案4
0 2020-01-12 15:35:00

使用 Javascript/Jquery 在 P 标签内添加一个 SPAN

问题描述

4 个解决方案

解决方案1 1 已采纳 2020-01-12 15:25:41

解决方案2 1 2020-01-12 15:26:52

解决方案3 0 2020-01-12 15:28:26

解决方案4 0 2020-01-12 15:35:00

解决方案1
1 已采纳 2020-01-12 15:25:41

解决方案2
1 2020-01-12 15:26:52

解决方案3
0 2020-01-12 15:28:26

解决方案4
0 2020-01-12 15:35:00