how to append a div between two anchor elements

i have got two anchor elements:

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

and

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

Now i want a div with a small image to be inserted between the two.

so it will be

<a onclick="PostMenuAction('abc');" class="port" title="AddPort" id="lnkPort">port</a>
 <div id="additionaldiv"> <img s开发者_开发知识库rc="" id="additional img" /> </div>
<a onclick="PostMenuAction('def');" class="crop" title="AddCrop" id="lnkCrop">crop</a>

Can you please help me out adding the same? my pleasure if this solved using javascript

Thanks in advance

Here you go. You can make this into a JavaScript Function:

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);

Here's a JavaScript function to do it:

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;
}

Call it in your case like this:

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

Put that call in whatever event handler or what-have-you you want to trigger the addition with.

More in the DOM specs: DOM2 Core, DOM2 HTML, DOM3 Core.

Here you go:

<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>

You can call a javascript to do this. Below is the way to do this feature.

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