Altering HTML with attributes using jQuery

Question

I've been looking for a way to use jQuery to translate HTML. For instance, I would like to change

<myTag name1="sally" name2="billy" datingFor="3" />
<myTag name1="jill" name2="tom" datingFor="4" />

to another form such as

<div>SALLY has been dating BILLY for 3 months</div>
<div>JILL has been dating TOM for 4 months</div>

using a jQuery function that executes after the document is ready.

Is there an easy way to do this? I know I can use something like $('#div').html('New Text') but this approach doesn't seem applicable when I have parameters (such as the name or datingFor fields).

are you getting the myTag elements as xml content or as a string? — Arun P Johny
– Arun P Johny, Commented Oct 29, 2013 at 16:20
My bad... I think I meant as XML. :( As you can tell, I'm pretty new to this!!! (: — chessofnerd
– chessofnerd, Commented Oct 29, 2013 at 16:38

Matteo Tassinari · Accepted Answer · 2013-10-29 16:33:55Z

2

Try this:

$('myTag').each(function() {
    var $this = $(this),
        name1 = $this.attr('name1'),
        name2 = $this.attr('name2'),
        dating = $this.attr('datingFor');

    $this.replaceWith($('<div/>').text(name1 + ' has been dating ' + name2 + ' for ' + dating + ' months'));
});

Working demo: http://jsfiddle.net/92ctS/ but I had to modify the tags from <myTag/> to <myTag></myTag> to have it work on Firefox.

This works with original tags though: http://jsfiddle.net/92ctS/1/

edited Oct 29, 2013 at 16:33

answered Oct 29, 2013 at 16:17

Matteo Tassinari

18.6k8 gold badges65 silver badges85 bronze badges

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

Comments

Venkata Krishna · Accepted Answer · 2013-10-29 16:19:47Z

1

jsFiddle Demo

var myTags = $('myTag');

myTags.each(function(i){
    var name1 = $(this).attr('name1');
    var name2 = $(this).attr('name2');
    var datingFor = $(this).attr('datingFor');
    $('.container').append('<div>' + name1 + ' has been dating '+ name2 + 'for '+ datingFor + ' months</div>');
    //$(this).replaceWith('<div>' + name1 + ' has been dating '+ name2 + 'for '+ datingFor + ' months</div>');
});

If you want to replace the existing myTag with the generated div.Use .replaceWith() instead of .append().

answered Oct 29, 2013 at 16:19

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

2 Comments

chessofnerd Over a year ago

Thanks for the answer! In particular, I like the demo! I'm in the process of integrating your answer into my code and assuming it works I will mark yours as the answer.

chessofnerd Over a year ago

Works like a charm! Thanks to all the answers. I looked quite a while on the internet trying to figure it out but all of you were able to clearly demonstrate how to do this!

Arun P Johny · Accepted Answer · 2013-10-29 16:26:46Z

1

Try

$('myTag').replaceWith(function () {
    var $this = $(this);
    return '<div>' + $this.attr('name1') + ' has been dating ' + $this.attr('name2') + ' for ' + $this.attr('datingFor') + ' months</div>'
})

Update: Since the OP has a string

var string = '<myTag name1="sally" name2="billy" datingFor="3" /><myTag name1="jill" name2="tom" datingFor="4" />';

var list = $(string).map(function () {
    var $this = $(this);
    return '<div>' + $this.attr('name1') + ' has been dating ' + $this.attr('name2') + ' for ' + $this.attr('datingFor') + ' months</div>'
}).get();

$('body').append(list.join(''))

Demo: Fiddle

edited Oct 29, 2013 at 16:26

answered Oct 29, 2013 at 16:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Altering HTML with attributes using jQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related