javascript - how to append a div between two anchor elements - Stack Overflow

admin管理员组

文章数量:1289586

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 src="" 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

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 src="" 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

• javascript
• anchor

Share Improve this question Follow edited May 10, 2011 at 7:11 bungdito 3,62044 gold badges3232 silver badges3838 bronze badges asked May 10, 2011 at 6:08 RonanRonan 3311 silver badge33 bronze badges 2

• Do you want to add div between two anchor elements on some click event? – Ankit Commented May 10, 2011 at 6:17
• do you want to make like this: <a id="first"></a><div id="additional"></div><a id="second"></a> ? – bungdito Commented May 10, 2011 at 6:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

本文标签： javascripthow to append a div between two anchor elementsStack Overflow