Add a tag to another tag using Javascript

Question

I have a jQuery that I use on a website that I’m doing that applies the zoom effect on an image. Only when I hover the mouse over the image and it zooms in, jQuery creates another IMG tag with the same image by applying a class="zoomImg" to it:

Only I’m wanting to map this image, so I used a Javascript code in which when hovering over this image that is inside a SPAN with an id="Ex1", it creates a MAP tag in this SPAN:

var para = document.createElement('map');
para.setAttribute('name', 'crateria-map');
document.getElementById('ex1').appendChild(para);
mostra = function() { /* Não faz nada */ } ---> este código eu obtive em outra pergunta, pois a função estava fazendo a tag ser criada toda vez que eu passava o mouse na imagem.

Since I’m going to map this image, I need to add a SPAN tag inside this SPAN tag that was created and using the same code I’m not getting:

var sub = document.createElement('area');
sub.setAttribute('class', 'html5lightbox');
document.getElementByName('crateria-map').appendChild(sub); 

In the MAP tag I used the id="Ex1" of the span to add the tag, so I thought I’d use the name of the SPAN tag to add the AREA tag, but as I said, it didn’t work, I’m using a "Function shows()" to enable Javascript.

I hope I have been clear and if I am not being, I apologize, because I understand almost nothing of Javascript.

Answer 1

In Javascript does not exist getElementByName only plural getElementsByName and will return an array.

So if there is only one element you can fetch the first element of that array with document.getElementsByName('crateria-map')[0].appendChild(sub);.

Looking at your code, I wonder if those lines are in the same position. 'Cause then it gets simpler, you don’t have to look in the DOM and you can use only para.appendChild(sub);. The whole code would be:

var para = document.createElement('map');
para.setAttribute('name', 'crateria-map');
document.getElementById('ex1').appendChild(para);

// assumindo que estas linhas estão no mesmo escopo/função
var sub = document.createElement('area');
sub.setAttribute('class', 'html5lightbox');
para.appendChild(sub);