4

Здравствуйте.

Я еще учу jQuery. Сегодня столкнулся с проблемой, что не туда, куда надо добавляется класс. Нужно, чтобы новый класс был у <p>, а вышло у <body>.

$(function () {
        var elem = $('body');
        elem
          .append('<p>Some text</p>'))
            .addClass('new');
});
.new {
  color: red;
}
<body>

</body>

Заранее спасибо.

4
  • elem.append('<p>Some text</p>').find('p').addClass('new');
    – soledar10
    5 ноя 2017 в 15:05
  • Что мешает не осложнять и сразу добавить .append('<p class="new">Some text</p>')) 5 ноя 2017 в 15:05
  • @RuslanSemenov , но если я сделаю большой сайт, в котором кучу абзацев, буду использовать append, prepend, before, after, то как это применить? 5 ноя 2017 в 15:06
  • Добавил ответ, с реальным примером, думаю разберетесь. 5 ноя 2017 в 15:21

3 ответа 3

4

//первый вариант:
$(function() {
  var elem = $('body');
  elem.append('<p class="new">Some text</p>');
});
//второй вариант
$(function() {
  var elem = $('body');
  elem.append('<p>Some text</p>');
  $('p').addClass('new');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

2
  • Так я и думал, но если я сделаю большой сайт, в котором кучу абзацев, буду использовать append, prepend, before, after, то как это применить? 5 ноя 2017 в 15:05
  • @IvanZadvornov приведите пример, кто конкретно нужно сделать? Вряд ли вы будете генерировать сайт поабзацно на js. Другое дело если текст нужно вставить где то между двух абцацев
    – engenes
    5 ноя 2017 в 15:12
3

Цепочные вызовы jQuery основаны на том, что многие методы объекта-обертки возвращают себя. Таким образом, Вам надо добавлять элемент, используя метод правильного объекта - того, которому Вы хотите следующим вызовом добавить класс:

var elem = $('body');
$('<p></p>').appendTo(elem).addClass('new');
1
  • Тоже вариант, но стоит добавить .html('Some text') Он текст тоже вставляет динамически. 5 ноя 2017 в 16:05
2

.prependTo( "body" ); вам в помощь или .appendTo("body");

$(function() {

  $('<p></p>')
    .html('Some text')
    .addClass('new')
    .prependTo("body");

});
.new {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.