Как добавить строковую переменную в середине другой строки в JQuery?

Question

У меня есть две переменные, как показано ниже, и я хочу добавить вторую переменную 'b' после 2-го деления в переменную 'a'.

var a = `<form action='javascript:void(0)' class='nani_chat_form'>
            <div class='nani_chat_name'><input placeholder='Name' type='text'></div>
            <div class='nani_chat_email'><span class='error'></span><input placeholder='Email' type='text'></div>
            <div class='nani_chat_phne'><span class='error'></span><input placeholder='Mobile'type='text'></div>
            <div class='nani_chat_sub' style='text-align:center'><input type='submit' value='Submit'></div>
            </form>`

var b = `<div class='nani_chat_city'><span class='error'></span><input placeholder='pincode' type='text'></div>`

Ожидаемый результат -

var c = `<form action='javascript:void(0)' class='nani_chat_form'>
            <div class='nani_chat_name'><input placeholder='Name' type='text'></div>
            <div class='nani_chat_email'><span class='error'></span><input placeholder='Email' type='text'></div>
            <div class='nani_chat_city'><span class='error'></span><input placeholder='pincode' type='text'></div>
            <div class='nani_chat_phne'><span class='error'></span><input placeholder='Mobile'type='text'></div>
            <div class='nani_chat_sub' style='text-align:center'><input type='submit' value='Submit'></div>
            </form>`

Answer 1

Вы можете использовать jQuery.parseHTML() до для анализа строки в массиве узлов DOM и использования .after() для этого на вставьте элемент после соответствующего элемента.

Вы можете вернуть узлы DOM в виде строки, используя .prop('outerHTML'):

Демо:

var a = `<form action='javascript:void(0)' class='nani_chat_form'>
<div class='nani_chat_name'><input placeholder='Name' type='text'></div>
<div class='nani_chat_email'><span class='error'></span><input placeholder='Email' type='text'></div>
<div class='nani_chat_phne'><span class='error'></span><input placeholder='Mobile'type='text'></div>
<div class='nani_chat_sub' style='text-align:center'><input type='submit' value='Submit'></div>
</form>`;

var b = `<div class='nani_chat_city'><span class='error'></span><input placeholder='pincode' type='text'></div>`

var c = $.parseHTML(a);
$(c).find('.nani_chat_email').after(b);
$('body').append(c); // append to test
console.log($(c).prop('outerHTML'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>