Question

我有两个主要元素：

<a onclick="PostMenuAction('abc');" class="port" title="AddPort" id="lnkPort">port</a>

和

<a onclick="PostMenuAction('def');" class="crop" title="AddCrop" id="lnkCrop">crop</a>

现在我想在两者之间插入一个带有小图像的div。

所以它将是

<a onclick="PostMenuAction('abc');" class="port" title="AddPort" id="lnkPort">port</a>
 <div id="additionaldiv"> <img src="" id="additional img" /> </div>
<a onclick="PostMenuAction('def');" class="crop" title="AddCrop" id="lnkCrop">crop</a>

你可以帮我加一下吗？我很高兴，如果这解决使用javascript

提前致谢

Answer 1

你走了。您可以将其转换为JavaScript函数：

var div = document.createElement("div");
var img = document.createElement("img");
img.src = "/path/to/image";
div.appendChild(img);
var a = document.getElementById("lnkCrop");
a.parentNode.insertBefore(div,a);

Answer 2

这是一个JavaScript函数：

function addImageBefore(path, id) {
    var div = document.createElement('div'),
        img = document.createElement('img'),
        refElement = document.getElementById(id);

    if (!refElement) {// Presumably atypical, hence not worrying about creating above
        return null;
    }
    img.src = path;
    div.appendChild(img);
    refElement.parentNode.insertBefore(div, refElement);
    return div;
}

在你的情况下称它为：

addImageBefore("path/to/img", "lnkCrop");

将该调用置于任何事件处理程序或您希望触发添加的内容中。

DOM规范中的更多内容：DOM2 Core，DOM2 HTML，DOM3 Core。

Answer 3

你走了：

<a onclick="PostMenuAction('abc');" class="port" title="AddPort" id="lnkPort">port</a>
<div><img src="small.gif" alt="" /></div>
<a onclick="PostMenuAction('def');" class="crop" title="AddCrop" id="lnkCrop">crop</a>

Answer 4

您可以调用javascript来执行此操作。以下是执行此功能的方法。

document.getElementById("lnkPort").innerHTML = document.getElementById("lnkPort").innerHTML+'<div><h1>Test</h1></div>';

如何在两个锚元素之间追加div

4 个答案: