javascript - 如何在jquery中的另一个字符串中间追加一个字符串变量？

Question

我有如下两个变量，并且想要在变量“a”中的第二个 div 之后添加第二个变量“b”。

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() 在匹配的元素后面插入元素。

可以使用.prop('outerHTML')以字符串的形式返回DOM节点:

演示:

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>