如何使用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);