CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Trink
Trink

Reputation: 584

Insert element between anchor and img tag

Is it possible in some way to add an element ( <div></div> in this case) in between the anchor tag and the image tag via javascript/jquery? high prefer if it can be possible using the id of the img tag.

<a href=""><img id="123" src="..."></a>

to

<a href="#"><img id="123" src="..."><div>abc</div></a>

or either 

<a href="#"><div>abc</div><img id="123" src="..."></a>

Upvotes: 1

Views: 192

Answers (5)

Deepak Kamat
Deepak Kamat

Reputation: 1980

A little bit of Vanilla JavaScript as well.

Okay, in your HTML, the img is inside of the a element i.e when you say you want another element between the a and img element what you actually mean is having that element inside of the a element.

Most common way to do that is to use jQuery's .append .prepend method, but some DOM API methods provided by default are capable of doing that and is supported widely across the browsers so why not go for the vanilla option.

If you reference a then you have to append/prepend your new HTML to it to have that new HTML around the img element inside, though there's an even better option, it is to use Element.insertAdjacentHTML - as the name suggests it can insert adjacent HTML, period.

Since you already have given your img element an id which is by the way incorrect, you should not start the id with a number, always use an English alphabet or an underscore, so let's say you have this:

<a href=""><img id="_123" src="..."></a>

All you have to do is

var myImg = document.getElementById('_123');
myImg.insertAdjacentHTML('afterend', '<div>abc</div>');

In the insertAdjacentHTML the first argument tells where to insert that HTML, afterend means after the element, beforeend is before, similar. There are also two other options afterbegin and beforebegin which would not work on self-closing elements such as img, those are similar to prepend and append in nature.

More about inserAdjacentHTML : https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

You can use before() and after() jQuery method to append and prepend any element. Here is the sample code.

// to get <a href="#"><img id="123" src="..."><div>abc</div></a>
$("#123").after("<div>abc</div>");
$( "<div>abc</div>" ).insertAfter("#123");

// to get <a href="#"><div>abc</div><img id="123" src="..."></a>

$("#123").before("<div>abc</div>");
$( "<div>abc</div>" ).insertBefore( "#123" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href=""><img id="123" src="..."></a>

Upvotes: 0

Gezzasa
Gezzasa

Reputation: 1453

Append it to the parent of the image

var div = '<div>Some Copy</div>'

$('#123').parent().append(div);

Upvotes: 1

brk
brk

Reputation: 50291

Use append method to add a child to the anchor tag.Also adding a div inside an a tag is antipattern as div is block level element & anchor tag can contain only inline element

var testDiv = '<div class ="testDiv"> Test Div</div>'

$('#testAnchorTag').append(testDiv)
.testDiv {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" id="testAnchorTag"><img src="..."></a>

For adding the div before the img you can use native js insertBefore method

var getChild = document.getElementById("childImg");
var getParent = getChild.parentNode;


var newDivChild = document.createElement('div');
newDivChild.innerHTML = "Test Div";
newDivChild.classList.add("testDiv");

getParent.insertBefore(newDivChild, getChild)
.testDiv {
  color: green;
}
<a href="" id="testAnchorTag"><img id="childImg" src="..."></a>

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Jquery can help with this. Just make sure to change the selectors once you incorporate it to your project.

$('a').html('<div>abc</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="#"><img id="123" src="..."></a>

Upvotes: 0

Related Questions