正确的方法将html追加到Jquery/Javascript

Question

我有以下代码:

<section class="section1">
    //Section one content
</section>
<section class="section2">
    <h4>Some Title</h4>

    <input type="hidden" class="keys" value="1"/>
    <div id="block-close-1"></div>
    <div class="block" id="block-1">
          //Block content
    </div>

</section>

<section class="section3">
    //Section3 content    
</section>

我想做的是拿一些html并在"block-1"之后插入它

我想添加的HTML如下所示:

    <input type="hidden" class="keys" value="2"/>
    <div id="block-close-2"></div>
    <div class="block" id="block-2">
          //Block content
    </div>

我试过这个:

var html = '//code as above';
$( "html" ).insertAfter( "#block-1");

我得到的错误是这样的:

Uncaught HierarchyRequestError:无法在'Node'上执行'insertBefore':新的子元素包含父元素.

我也试过这个:document.getElementById('#block-4').appendChild(html);

错误:

未捕获的TypeError:无法读取null的属性'appendChild'

将新HTML添加到现有HTML的正确方法是什么？

Answer 1

你$(html)不 想要$("html")

第一个尝试添加变量html的内容,第二个尝试在DOM上找到标记html并添加它〜

Answer 2

本机JavaScript方法是这样的:

document.getElementById("block-1").insertAdjacentHTML("afterend",html);

jQuery方法:

$("#block-1").after(html);

Answer 3

从insertAfter的 jQuery文档...

.after()和.insertAfter()方法执行相同的任务.主要区别在于语法特定,内容和目标的放置.使用.after(),方法之前的选择器表达式是插入内容之后的容器.另一方面,使用.insertAfter(),内容在方法之前,作为选择器表达式或动态创建的标记,并在目标容器之后插入.

也就是说,如果您想在block-1选择block-1并在其上调用insertAfter()之后放置新的html ,则将新的html作为参数传递 -

$('#block-1').insertAfter( $(html) );

或者你可以保留你的订单,如果它对你更直观,但是使用 .after()

$(html).after($('#block-1'));