使用 Javascript/Jquery 在 P 标记中添加 SPAN

我有一个带有"price"类的段落标签，我想使用Javascript，Jquery或两者在里面添加一个span标签。

例如

之前：

之后：Sale

我怎样才能做到这一点？

您可以执行以下操作：

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

这是普通的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>

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

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

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

使用 jQuery：

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

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

如果需要vanilla 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>

相关内容

最新更新

热门标签：