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并在＆＃34; block-1＆＃34;

之后插入它

我想添加的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");

我得到的错误是：

未捕获的HierarchyRequestError：失败执行＆＃39; insertBefore＆＃39; on＆＃39;节点＆＃39;：新的子元素包含父母。

我也试过这个：的document.getElementById（＆＃39;＃块-4＆＃39）。使用appendChild（HTML）;

错误：

未捕获的TypeError：无法读取属性＆quot; appendChild＆＃39;为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

来自insertAfter ...

的jQuery文档

.after（）和.insertAfter（）方法执行相同的任务。该主要区别在于语法特定，在放置中内容和目标。使用.after（），选择表达式在该方法之前是容器，在该容器之后是内容插入。另一方面，使用.insertAfter（），内容先于该方法，作为选择器表达式或作为标记创建苍蝇，它被插入目标容器之后。

也就是说，如果你想在block-1之后放置你的新html，你选择block-1并在其上调用insertAfter（），传递新的html作为参数 -

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

或者，如果对您更直观，您可以保留订单，但请使用.after()

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

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

3 个答案: