动态添加元素

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上的工作示例。