jquery-未创建动态元素_Jquery

jquery-未创建动态元素

jquery

jquery-未创建动态元素,jquery,Jquery,我正在尝试在之后添加另一个元素 $（文档）.ready（函数（）{ var myHTML=“”； myHTML+=“链接1”； $（“链接1”）。在（“链接2”）之后； myHTML+=“”； $（“div#insertHere”）.html（myHTML）； }); 以上的输出应为 <body> <div id="insertHere"> <div id="test"> <span>

我正在尝试在

之后添加另一个

元素


$（文档）.ready（函数（）{
var myHTML=“”；
myHTML+=“链接1”；
$（“链接1”）。在（“链接2”）之后；
myHTML+=“”；
$（“div#insertHere”）.html（myHTML）；
});

以上的输出应为

<body>
   <div id="insertHere">
      <div id="test">
         <span>
            <a id="link1">link 1</a>
            <a id="link2">link 2</a>
         </span>
      </div>
   </div>
</body>


链接1
链接2

在您的标记

插入中，div是空的，我没有看到任何id为link1
的现有锚。我想你在找这个
    $(document).ready(function () {
            var myHTML = "<div id='test'>";
            myHTML += "<a id='link1'>link 1</a>";
            myHTML += "<a id='link2'>link 2</a>";
            myHTML += "</div>";
            $("#insertHere").html(myHTML);
     });

$（文档）.ready（函数（）{
var myHTML=“”；
myHTML+=“链接1”；
myHTML+=“链接2”；
myHTML+=“”；
$（“#insertHere”）.html（myHTML）；
});

您可以使用after
在调用after
方法的元素之后插入元素。
您正在尝试查询尚未添加到DOM的元素。

当您执行$（“a#link1”）
时，它不会检索任何元素，因为您之前“生成”的HTML尚未在DOM中，它仍然只是变量myHTML
中的文本
生成所有标记并立即应用：
$(document).ready(function () {
    var myHTML = "<div id='test'>";
    myHTML += "<a id='link1'>link 1</a>";
    myHTML += "<a id='link2'>link 2</a>";
    myHTML += "</div>";
    $("div#insertHere").html(myHTML);
});

$（文档）.ready（函数（）{
var myHTML=“”；
myHTML+=”
将html添加到已存在的div的另一种方法是使用
$("div#insertHere").append(someHML);

每次调用时，都会向元素中添加更多的代码
尽量减少DOM操作（在附加之前存储尽可能多的HTML），以减少加载时间
例如：
$("div#insertHere").append("<div id='test'></div>");
$("div#test").append("<span><a id='link1'>link 1</a></span>");
$("div#test").append("<span><a id='link2'>link 2</a></span>");

$（“div#insertHere”）。追加（“”）；
$（“div#test”）。附加（“链接1”）；
$（“div#test”）。追加（“链接2”）；

$("div#insertHere").append(someHML);

$("div#insertHere").append("<div id='test'></div>");
$("div#test").append("<span><a id='link1'>link 1</a></span>");
$("div#test").append("<span><a id='link2'>link 2</a></span>");