добавить HTML элемент с JQuery

мне нужна помощь, чтобы добавить элемент в HTML с помощью JQuery, я новичок на этой территории, я попробовал несколько метод и недобавить HTML элемент с JQuery

вот HTML-

<div id="relatedpostspro_0_1" class="rpp rpp_isotope" style="width:auto;"> 
    <div class="rpp_container"> 
     <legend>Related Posts</legend> 
     <div>...</div> 
     <div>...</div> 
     <div>...</div> 
    </div> 
</div>

и я хочу, чтобы добавить этот маленький кусочек

<div class="stripe-line"></div>

так это приведет к:

<div id="relatedpostspro_0_1" class="rpp rpp_isotope" style="width:auto;"> 
    <div class="rpp_container"> 
     <legend>Related Posts</legend> 
     <div class="stripe-line"></div> 
     <div>...</div> 
     <div>...</div> 
     <div>...</div> 
    </div> 
</div>

используя эти 2 JQuery из первых 2 ответа

$('.rpp_container').append('<div class="stripe-line"></div>');

var line = $('<div />').addClass('stripe-line'); 
line.appendTo('.rpp_container');

в результате линию добавленной в нижней части, а не сразу после <legend>Related Posts</legend>

Спасибо большое!

источник

2015-04-26 somuch72

Эй, разместим ваш код JQuery, а поэтому мы знаем, почему ваши методы не работают – Xufox

я хочу добавить. stripe lines, попробовал несколько раз с помощью css с использованием псевдоэлемента: после и неудачно, потому что он имеет свойство повторения. Нельзя установить ширину: 100%, потому что она не начинается слева: 0; использование переполнения: скрыто, а не помогает. работать только с добавлением нового элемента Ent. пробовал с заменой поиска не работать, я новичок в этой штуке. – somuch72

Использование after

$('.rpp_container legend').after('<div class="stripe-line"></div>');

Ссылка: https://api.jquery.com/after/

источник

2015-04-26 15:30:28 Tushar

просто измените мой вопрос для более точного html. спасибо – somuch72

@ somuch72 Уточненный ответ. – Tushar

Работайте как очарование! большое спасибо. это сообщество круто. обычно мне требуется 5 часов, чтобы получить код 5-10 строк, в следующий раз я спрошу здесь через 3 часа: D – somuch72

Попробуйте

$('.rpp_container').append('<div class="stripe-line"></div>');

источник

2015-04-26 15:30:36 kidA

Есть много различных способов, чтобы найти/изменяющие DOM elememts, append уже было показано:

$(document).ready(function() { 
    $('.rpp_container').append('<div class="stripe-line"></div>'); 
});

Example Fiddle

Вы также можете использовать after с find:

$(document).ready(function() { 
    $('.rpp_container').find('legend').after('<div class="stripe-line"></div>') 
});

Example Fiddle

Несколько других полезных методов обхода DOM:

источник

2015-04-26 16:05:24 Und3rTow

hi .. он работает только с помощью 'after()'. извините за мой igonrance, зачем использовать 'find()'? Я часто видел код jquery, используя это, я предполагаю, что во избежание неправильного элемента? – somuch72

Со временем ваш HTML может усложниться, использование 'find' поможет упростить выбор правильного элемента, этот метод в основном позволяет нам искать потомков набора элементов в дереве DOM. – Und3rTow

Я считаю, что вы нуждаетесь в after() («Вставить содержимое, заданное параметром, после каждого элемента в наборе согласованных элементов.«):

$('.rpp_container legend').after('<div class="stripe-line"></div>');

jsFiddle example

Который производит:

<div id="relatedpostspro_0_1" class="rpp rpp_isotope" style="width:auto;"> 
    <div class="rpp_container"> 
     <legend>Related Posts</legend> 
     <div class="stripe-line"></div> 
     <div>...</div> 
     <div>...</div> 
     <div>...</div> 
    </div> 
</div>

источник

2015-04-26 16:06:09 j08691

да, по-видимому, я ищу 'after()' спасибо! – somuch72

добавить HTML элемент с JQuery

ответ

Смежные вопросы