正确的方法将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之后放置你的新html，你选择block-1并在其上调用insertAfter（），传递新的html作为参数 -

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

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

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