Question

我想在<a>

之后添加另一个<a id='link1'>元素

<html>
    <head>
        <script src="js/jquery-1.6.4.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var myHTML = "<div id='test'>";
                myHTML += "<span><a id='link1'>link 1</a></span>";
                $("a#link1").after("<a id='link2'>link 2</a>");
                myHTML += "</div>";
                $("div#insertHere").html(myHTML);
            });
        </script>
    </head>
    <body>
        <div id="insertHere">

        </div>
    </body>
</html>

上述输出应为

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

Answer 1

在您的标记insertHere div为空时，我看不到任何标识为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);
     });

您可以使用after在您调用after方法的元素之后插入元素。

Answer 2

您正在尝试查询尚未添加到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);
});

如果需要将事件（或其他）绑定到要添加的元素，可以使用jquery中的dom manipualtion API：

$(document).ready(function () {
    var $div = $('<div id="test">').addClass('myClass');

    $('<a id="link1">link 1</a>').click(function() { }).appendTo($div);
    $('<a id="link2">link 2</a>').appendTo($div);

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

进一步阅读：

jQuery - Manipulation

Answer 3

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

jquery - 未创建动态元素

3 个答案: