как добавить div между двумя элементами привязки

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 для этого:

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 2

Вот, пожалуйста.Вы можете превратить это в функцию 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 3

Вы можете вызвать JavaScript для этого. Ниже описан способ сделать эту функцию.

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

Answer 4

Вот, пожалуйста:

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