在javascript中的图像上方添加按钮答案

【问题标题】：Adding button above an image in javascript在javascript中的图像上方添加按钮
【发布时间】：2017-06-20 08:39:02
【问题描述】：

我正在使用 image-map-pro-jquery-interactive-image 并尝试在图像上方添加一个按钮，但它不会显示。

 var div1=document.getElementById("wcp-editor-canvas");
     console.log(div1)
     div1.innerHTML+='<button style="position:absolute;">Do it</button>';

有什么办法吗？

【问题讨论】：

请提供js-fiddle以更好地说明案例
请改用insertAdjacentHTML，因为它可以让您更好地控制 HTML 字符串的插入位置。所以一个例子是div1.insertAdjacentHTML('afterBegin', '<button style="position:absolute;">Do it</button>')
insertAdjacentHTML 对我不起作用
@KAD — Stackoverflow 已支持inline live demos 年。无需求助于外部托管演示。
@LaamiriOussema — 尝试提供minimal reproducible example。仅凭那一小段代码很难判断问题出在哪里。

标签： javascript html innerhtml

【解决方案1】：

将位置更改为相对并将样式设置为"display: block; position: relative"按钮被覆盖，因为位置是绝对的，这意味着该元素在布局中没有位置。此外，innerHTML 需要存储在一个等于 buttonHTMLString + innerHTML 的变量中，这会将按钮 HTML 放在其他 HTML 的前面。

【讨论】：