如何使用jQuery在div中生成ID为'blurb'的段落？

Question

我的网页上有一个div元素，ID为“map”，其中包含指向Google的链接。

<div id="map">
    <a href="http://google.com">Google</a>
</div>

我想使用jQuery在ID为“blurb”的链接之后生成一个段落，所以HTML类似于Javascript生成的是

<div id="map">
    <a href="http://google.com">Google</a>
    <p id="blurb"></p>
</div> 

我一直在试验

$('#map').append('p').attr('id', 'blurb');

无济于事。

我对Javascript持开放态度，但非jQuery方式也是如此。 谢谢！

Answer 1

这应该工作：

$('#map').append('<p id="blurb"></p>');

你的方法是正确的一般想法，但只是附加文本'p'而不是标记<p>并且id没有在正确的对象上设置，因为jQuery链接的方式适用于.append() 。

如果你想出于某种原因以编程方式分配id，那么这样做可能更容易：

$('<p>').attr('id', 'blurb').appendTo('#map');

Answer 2

首先，设置所有属性，然后追加。

$('<p>').attr('id', 'blurb').appendTo('#map');

Answer 3

您的代码不起作用有两个原因。 首先，append可以采用文本，你必须使用标记（ <p> ）而不是p来区分文本和HTML。 另一个原因是链接意味着jQuery的append函数将返回它被调用的jQuery对象。 在这种情况下，对象引用您的地图元素。 因此，当您设置id时，您设置的是map div的id，而不是新创建元素的id（假设<p>错误已修复）。 你也应该使用prop来设置id而不是attr，但两者都可能适用于id。 这是一些示例代码：

jQuery的：

$('<p>').appendTo('#map').prop('id', 'blurb');

简单的Javascript（更快，但不太清晰）：

var pel = document.createElement('p');
pel.id = 'blurb';
document.getElementById('map').appendChild(pel);