Используйте Javascript / Jquery, чтобы добавить SPAN внутри тега P - PullRequest
Новая
       1

Используйте Javascript / Jquery, чтобы добавить SPAN внутри тега P

0 голосов
/ 12 января 2020

У меня есть тег абзаца с классом "price", в который я хочу добавить тег span, используя либо Javascript, Jquery, либо оба.

Например,

ДО : <p class="price"></p>

ПОСЛЕ: <p class="price"><span class="whatever">Sale</span></p>

Как этого добиться?

Ответы [ 4 ]

1 голос
/ 12 января 2020

Это просто 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>

Вы можете сделать метод более универсальным c, также передав параметры.

1 голос
/ 12 января 2020

Вы можете сделать следующее: 

$("p.price").append($(`<span class="whatever">Sale</span>`));
0 голосов
/ 12 января 2020

при необходимости ваниль 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>
0 голосов
/ 12 января 2020

Чтобы добавить его в элемент первый .price, без jQuery: 

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

С jQuery: 

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

Если вы знаю, что есть только один, вы можете пропустить .first().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...