Adding a tag to another tag using JavaScript

Question

Adding a tag to another tag using JavaScript

Navigation

#1 by (0 votes)

1

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

I just want 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.

As 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 as a reference the span id="ex1" to add the tag, so I thought about using the SPAN tag name to add the AREA tag, but like I said, it did not work, I'm using a "function show ()" to enable JavaScript.

I hope it was clear and if I'm not being, I apologize, because I do not understand almost anything about JavaScript.

javascript jquery div tag span

asked by anonymous 23.03.2015 / 13:48

1 answer

Bootstrap table filter does not work build erases files

score 0 · Accepted Answer

In JavaScript there is no getElementByName only in the plural getElementsByName and will return an array.

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

Looking at your code, I wonder if these lines are in the same function. Because in that case it's still simpler, you do not need to search the DOM and you can only use 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);