How do you add an element next to another using JavaScript

Question

I have the code to append an element to another via classname. It works however it no use as I'm not able to distinguish this appended element from it's parent. It's all under the parents <a href tag.

Is it possible to add an element next to another element so it's within it's own tag hence I can identify it separately?

I'm getting all the parents elements via classname.

const emailElements = document.getElementsByClassName('email');
[...emailElements].map(el => {
const image = 
document.createElement('img');
image.setAttribute('src', 'https://i.ibb.co/QbPNFwB/t.jpg');   
el.append(image);
});

what do you mean with "next" is it an element after another one ? — Abdessamad Jadid
– Abdessamad Jadid, Commented Aug 26, 2020 at 15:45
Does this answer your question? How to insert an element after another element in JavaScript without using a library? — FluffyKitten
– FluffyKitten, Commented Aug 26, 2020 at 15:47
Yes one after another or next too, similar to append but not within the parent elements tag as then you can't distinguish this new element from the parent. — Andy S
– Andy S, Commented Aug 26, 2020 at 15:50
@AndyS it sounds like you want to insert it after another element - that already has a good answer here on StackOverflow, see the link I gave you! — FluffyKitten
– FluffyKitten, Commented Aug 26, 2020 at 15:51
the answer of your queston is here [(stackoverflow.com/questions/4793604/… — Abdessamad Jadid
– Abdessamad Jadid, Commented Aug 26, 2020 at 16:36

altruios · Accepted Answer · 2020-08-26 16:35:06Z

1

the best way to distingush elements is by 'id'... as such - the answer is just to put an id tag on each img element so you have 100% control over each image.

const emailElements = Array.from(document.getElementsByClassName('email'));
emailElements.map(el => {
const image = 
document.createElement('img');
image.setAttribute('src', 'https://i.ibb.co/QbPNFwB/t.jpg');   
image.setAttribute('id', `image${emailElements.indexOf(el)}`);   
el.append(image);
});

answered Aug 26, 2020 at 16:35

altruios

1,0832 gold badges15 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do you add an element next to another using JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related