Question

使用jQuery（抱歉，完整的菜鸟）我想知道为什么这不起作用。也许我没有得到链接，上下文和DOM操作的方式，但我只是好奇。在这里：

$("#myDiv")
    .append("h3")
    .append("a")
    .attr("href", "http://example.com")
    .text("Click here")
    .end();

我期望发生的事情：

选择#myDiv
在其中插入H3
然后在H3内插入A标签
将A标记的HREF属性设置为URL
然后将A标记的文本设置为“Click Here”

相反，我的页面标记似乎完全搞砸了，虽然我看不到动态DOM，所以我不确定发生了什么。我读错了jQuery文档吗？

Answer 1

应该是

$("#myDiv")
    .append("<h3>").children('h3:last')
    .append("<a>").children('a:last')
    .attr("href", "http://example.com")
    .text("Click here")

每个方法都返回执行它的原始jQuery对象（除find之外的children，.end()等等，这样你就可以继续在他们身上工作。

我完全删除了h3，因为只有在使用改变jQuery对象的遍历方法时才会有用。

所以你原来的那个（除了你想要添加标签之外的附加html需要标签的错误）会将#myDiv追加到a，然后追加再次#div到href，然后将属性#myDiv设置为#myDivs，最后设置其文本 - #myDiv文字;）< / em>的

一切都将在{{1}}上完成。

Answer 2

你走了：

$('#myDiv')
    .append($('<h3>')
        .append($('<a>')
            .text('Click here')
            .attr('href', 'http://example.com')));

现场演示： http://jsfiddle.net/HNMET/1/

请注意，DOM仅在上操作（=当H3元素附加到DIV时）。

由于上面的代码有点棘手（这让我觉得有点混乱），我把它分解为3行。注意，这几乎是相同的代码，我只添加了两个“辅助”变量，使其更具可读性：

var anchor, h3;

anchor = $('<a>').text('Click here').attr('href', 'http://example.com');
h3 = $('<h3>').append( anchor );
$('#myDiv').append( h3 );

现场演示： http://jsfiddle.net/HNMET/11/

使用jQuery和链接操作DOM元素

2 个答案: