jQuery insertAfter игнорирование родительских стилей

Question

Я использую jQuery, чтобы вставить кнопку в div, у которой уже есть две аналогичные кнопки. Хотя эта новая кнопка отображается со своими собственными правильными стилями, родительский стиль не применяется к ней (например, все элементы input в пределах div откладываются. 1-й и 2-й элементы хороши, но новый приклеен к 2-я кнопка).

Если я возьму точный HTML-код этой новой кнопки и поместил ее на страницу, все 3 кнопки появятся правильно.

Является ли jQuery.insertAfter() каким-то образом вызывая игнорирование родительских стилей? Как я могу это исправить?

Answer 1

Он должен иметь тот же стиль, если вы добавили стиль в дочерние элементы.

здесь демо

$(function() { 
 
    $('<input>', {type:"button", value:"3", class:"btn3"}) 
 
     .insertAfter($(".btn2")); 
 
});

.parent input 
 
{ 
 
    background:#ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <input type="button" value="1" class="btn1" /><input type="button" value="2" class="btn2" /> 
 
</div>