Is it possible to change the current element from div to a tag with jQuery?

Question

<div class="item" onclick="location.href='a1.html'"></div>
<div class="item" onclick="location.href='a2.html'"></div>
<div class="item" onclick="location.href='a3.html'"></div>
<div class="item" onclick="location.href='a4.html'"></div>
<div class="item" onclick="location.href='a5.html'"></div>

$('.item').each(function() {
    $(this)[0].replace('div', 'a')
})

Is it possible to change all the div tag to a tag? I have tried the code above but not work, any ideas?

Thanks

Would you like to change those onclicks into `href` attributes as well? — Fabrício Matté, Jun 08 '13 at 04:11

score 2 · Accepted Answer · answered Jun 08 '13 at 04:19

2

Try

$('.item').each(function(){
    var $this = $(this);
    var onclick = $this.attr('onclick');
    var match = onclick.match(/(location.href=')(.*)(')/);
    $this.replaceWith($('<a/>', {href : match[2], html: this.innerHTML}))
})

Demo: Fiddle

answered Jun 08 '13 at 04:19

Arun P Johny

384,651
66
527
531

I'd still advocate for moving the contents instead of re-parsing the `innerHTML` - remember that `innerHTML` is a serialized representation of the DOM therefore many valuable properties may be lost, together with all event handlers bound to the descendants. – Fabrício Matté Jun 08 '13 at 04:25
So Arun solution will lost all event listener bound to the `div` element and Fabricio won't? – Charles Yeung Jun 08 '13 at 04:30
1

@CharlesYeung Both lose `div`'s handlers. Difference is that mine doesn't lose handlers bound to the `div`'s descendants, nor descendants' [non-serializable properties](http://stackoverflow.com/q/11778123/1331430) like `value` and `checked`. – Fabrício Matté Jun 08 '13 at 04:39

score 2 · Answer 2 · edited Jun 08 '13 at 04:51

2

Taking a shot as well:

$('.item').each(function() {
    $(this).replaceWith(
        $('<a>', {
            href: /'(.+)'/.exec($(this).attr('onclick'))[1],
            append: $(this).contents()
        })
    );
});

Demo

Explanation:

Creates an anchor element (<a>);
- Sets its href to the text between single quotes in the div's onclick attribute;
- Moves all contents (descendant elements and text nodes) from the div to the anchor element, this way preserving their attached event handlers.
Replaces the div with the created anchor element.

Implications: Any handler bound directly to the div previously (e.g. through .on() or addEventListener) will still be trashed.

edited Jun 08 '13 at 04:51

SomeShinyObject

7,581
6
39
59

answered Jun 08 '13 at 04:20

Fabrício Matté

69,329
26
129
166

Oh Arun beat me to it, no problem. `=]` – Fabrício Matté Jun 08 '13 at 04:22
Why `replaceWith` can accept more then one argument, but I can't see it mentioned in the document http://api.jquery.com/replaceWith/, it said `.replaceWith(newContent)` or `.replaceWith(function)`? – Charles Yeung Jun 08 '13 at 04:34
@CharlesYeung Oh it is because of my indentation, I'll re-indent it better. What is being passed to replaceWith is actually just a jQuery object: `$('', {})` – Fabrício Matté Jun 08 '13 at 04:36
Why the jQuery object can be made as `$('', {})`, any document for it? I would like to learn it, thanks. – Charles Yeung Jun 08 '13 at 04:40
1

@CharlesYeung The syntax `$('string representing a single element', attributes)` is documented here: http://api.jquery.com/jQuery/#jQuery-html-attributes – Fabrício Matté Jun 08 '13 at 04:42

score 0 · Answer 3 · edited May 23 '17 at 12:28

0

See this link. For your example you would do something like this:

$('.item').each(function() {
    $(this).replaceWith($('<a>' + this.innerHTML + '</a>'));
})

edited May 23 '17 at 12:28

Community

1
1

answered Jun 08 '13 at 04:06

jkf

101
4

score 0 · Answer 4 · answered Jun 08 '13 at 04:15

Try:

<div class="item" onclick="location.href='a1.html'"></div>
<div class="item" onclick="location.href='a2.html'"></div>
<div class="item" onclick="location.href='a3.html'"></div>
<div class="item" onclick="location.href='a4.html'"></div>
<div class="item" onclick="location.href='a5.html'"></div>

$('.item').each(function(){
    var onClick = $(this).attr('onclick');
    $(this).replaceWith('<a class="item" onclick="'+onClick+'"></a>');
});

Is it possible to change the current element from div to a tag with jQuery?

4 Answers4