動態添加元素

Question

當我點擊按鈕時，它必須在div和帶邊框的圖像中添加一個對象（img，p），然後獲取該對象的位置（x，y座標） 。

我怎樣才能讓這個使用JQuery？

HTML：

<div style="height: 440px; border: 1px solid; width: 880px; margin-top: 50px; margin-left: -12px;"> 
    <img id="imagem-principal" width="880" height="440" class="custom_media_image attachment-post-thumbnail" src="<?= $segunda_imagem; ?>"> 
</div> 

Answer 1

爲了有一個按鈕，創建一個新的<img>並將其放置在頂部，添加以下樣式：

div { 
    position: relative; 
} 
img:not(#imagem-principal) { 
    position: absolute; 
} 

然後，您可以添加一個onclick監聽器jQuery：

$("#addImg").click(function() { 

    // set x and y to what you want 
    var xCoor = // X_COORDINATE; 
    var yCoor = // Y_COORDINATE; 

    var newImg = $("<img src='/* IMAGE_URL */' />"); 
    newImg.css({left: xCoor, top: yCoor}); 
    $("div").append(newImg); 
}); 

這將創建一個新的圖像與和y座標頂部其他圖像。

請參閱JSFiddle.net上的工作示例。