append html к элементу без имени div

Question

У меня нет контроля над html этой формы, которая также не находится в правильно названном div. поэтому из того, что я знаю о .append, я не знаю, как настроить таргетинг на то, что я ищу.

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

<input class="field" name="email" type="text"> 

что-то вроде

<input class="field" name="segment" value="website" type="hidden"> 

я представляю какую-то регулярное выражение будет хорошо работать для этого?

Answer 1

Попробуйте

$("input[name=email]").parent().append('<input class="field" name="segment" value="website" type="hidden"/>'); 

Это будет направлен на Ваш электронный вход, поднимается к каждому входу в родительском элемент в дереве DOM, а затем добавить ваши скрытые поля.

РЕДАКТИРОВАТЬ:

Here is a pretty basic jsfiddle примера. Примечание: для примера, я изменил ваш тип входного ввода на text, чтобы продемонстрировать, что код работает.

Answer 2

Вы можете использовать after() для вставки рядом с элементом

$('[name="email"]').after($('<input/>', { 
 
    class: 'field', 
 
    name: 'segment', 
 
    value: 'website', 
 
    type: 'hidden' 
 
}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input class="field" name="email" type="text">

Answer 3

Поскольку я не был уверен, из вашего вопроса, что вы действительно хотели, я покрывал 3 возможных случая:

var input2Append = $('input.field[name=email]'); 
 

 
//this places another input after the email input 
 
$('#add').click(function() { 
 
    input2Append.after('<input class="field" name="segment" value="website">'); 
 
}); 
 
//this changes the properties of the email input 
 
$('#change').click(function() { 
 
    input2Append.prop({'name':'segment','value':'website'}); 
 
}); 
 
//this shows/hides the inputs 
 
$('#hide').click(function(){ 
 
    $('input').toggle() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="field" name="email" type="text"><br><button id="add">Add input</button><button id="change">Change input</button><button id="hide">Hide/show inputs</button>

добавляет один элемент внутри другого элемента (хорошо для содержания элементов). Так как вы не можете разместить HTML внутри элемента input, как в div (т. Е. Внутренний контент), вы не увидите никакого результата, если используете append.

Поэтому, если вы хотите добавить другие входы после того, который вы выбрали, вместо этого вы должны использовать after.