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

Correct way to append html to Jquery/Javascript

本文关键字：Javascript 方法 Jquery html      更新时间：2023-09-26

我有以下代码：

<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");

我得到的错误是：

未捕获层次结构RequestError:失败在"Node"上执行"insertBefore"：新的子元素包含家长。

我也尝试过：document.getElementById（'#block-4'）.appendChild（html）；

错误：

未捕获的类型错误：无法读取null 的属性"appendChild"

在现有HTML中添加新HTML的正确方法是什么？

您想要$(html)而不是$("html")

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

原生JavaScript方法是：

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

jQuery方法：

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

从jQuery文档中插入After。。。

.fafter（）和.insertAfter（）方法执行相同的任务。这个主要的区别在于语法，特别是在内容和目标。使用.fafter（），选择器表达式方法前面是内容所在的容器插入。另一方面，对于.insertAfter（），内容位于方法，作为选择器表达式或作为在上创建的标记苍蝇，并将其插入目标容器之后。

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

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

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

$(html).after($('#block-1'));
相关文章：