将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并将其插入到“块-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 :在‘Node’上执行'insertBefore‘失败:新的子元素包含父元素。

我也试过这样做: document.getElementById('#block-4').appendChild(html)；

错误：

Uncaught :无法读取属性'appendChild‘的null

向现有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

来自jQuery文档的insertAfter ..。

.after()和.insertAfter()方法执行相同的任务。主要区别在于语法--具体而言，内容和目标的位置。对于.after()，方法前面的选择器表达式是插入内容的容器。另一方面，对于.insertAfter()，内容在方法之前，或者作为选择器表达式，或者作为动态创建的标记，它被插入到目标容器之后。

也就是说，如果要将新html放在block-1之后，则选择块-1并在其上调用insertAfter()，将新html作为参数-

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

或者你可以保持你的秩序，如果它对你来说更直观，但使用.after()

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