How to add a new HTML node using jQuery

Question

so me and my friend are trying to make a userscript for a site and can't get past this issue. We wish to add a script from the shoutbox of the site and add it to the names on the right hand side to be able to @ people with their name there.

The script for the @ simple is here, this is already in the sites HTML, we are just trying to move it.

<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="Tattoo"></li>

Our current attempt is -

function onLoad() {
    $( document ).ready(){
        var uname = $(this).data('data-at-uname');
        $( "a.online-name" ).add(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)
    }
}

But with no success. The whole pages HTML can be found here - http://pastebin.com/J6kk6LSn

The plugin we are using is Greasemonkey if it helps, we have been trying to do this for hours to no avail. If anyone can help it will be greatly appreciated.

Can you perhaps prepare a fiddle and illustrate your issue ? — Dimitar Dimitrov, Jul 15 '14 at 08:41
What is `$(this).data('data-at-uname')` supposed to do? The `.ready()` handler is bound to the whole `document`, there's no specific element that will become the context for `this`. — Barmar, Jul 15 '14 at 08:50
`.add()` probably doesn't do what you think it does, you probably should be using `.append()`. But you can't append a `

Bhushan Kawadkar · Answer 1 · 2014-07-15T09:44:17.403

3

You need to correct two things :
1. correct syntax data-at-uname reading - see the below code
2. adding html node - put html in single quotes and use .append()

Use below code :

$( document ).ready(function(){
var uname = $(this).data('at-uname');// read it like this
$( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');
});

EDIT : as per discussion, OP want to add li for each and every anchor inside <span class="online-name", so here is the code:

 $(document).ready(function(){
    $( ".online-name a").each(function(){
        var uname = $(this).data('at-uname');
        // add li before anchor
        $(this).before('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');

       // add li after anchor
      $(this).after('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');
    });
  });

edited Jul 15 '14 at 09:44

answered Jul 15 '14 at 08:43

Bhushan Kawadkar

28,279
5
35
57

Doesn't do what its meant to however, its meant to add the @ Symbol to all the names on the right hand side. Here is a fiddle - – user3839991 Jul 15 '14 at 09:02
Woops, hang on one sec – user3839991 Jul 15 '14 at 09:07
I can't save the jsfiddle without it going to screen mode, you're going to have to paste the HTML from the pastebin here in yourself - http://pastebin.com/J6kk6LSn – user3839991 Jul 15 '14 at 09:11
all the names means '@Tattoo : ' should be like 'Tattoo @: ' ? – Bhushan Kawadkar Jul 15 '14 at 09:14
On the right do you see the Members in Chat? And in the chat box there is an @ Symbol next to peoples names? That @ symbol should be on the left of peoples names on the right as well if possible – user3839991 Jul 15 '14 at 09:17
as per viewsource, class="online-name" used for span tag and not for ..then $( "a.online-name" ) is wrong – Bhushan Kawadkar Jul 15 '14 at 09:17
How do I fix that then? – user3839991 Jul 15 '14 at 09:20
can you post sample html structure where you want to add this li tag, may be jsfiddle is better. – Bhushan Kawadkar Jul 15 '14 at 09:28

user3839991

Jul 15 '14 at 09:35

That is how it would be under every persons code under members in chat, I just copy pasted it in and it works fine. I just need the script to add that automatically to each person in chat. – user3839991 Jul 15 '14 at 09:35

Thanks for all you have done but still didn't work, oh well, guess its not meant to be >. – user3839991 Jul 15 '14 at 09:49

Barmar · Answer 2 · 2014-07-15T08:56:24.270

1

The syntax of your document.ready() is wrong. It should be:

function onLoad() {
    $(document).ready(function() {
        var uname = $(this).data('data-at-uname');
        $( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>')
    });
}

The function is an argument to .ready().

You were also missing quotes argument the argument to .add().

edited Jul 15 '14 at 08:56

answered Jul 15 '14 at 08:45

Barmar

741,623
53
500
612

I just copied that from the code in the question. I don't know why he did it that way. – Barmar Jul 15 '14 at 08:48
`.add` will not display the element but add it to the DOM – nraina Jul 15 '14 at 08:52
@florin.prisecariu: refer to this SO it will answer your question ,http://stackoverflow.com/questions/4395780/difference-between-onload-and-ready – dreamweiver Jul 15 '14 at 09:08
@dreamweiver That doesn't explain why to use **both** of them, it just describes the differences. – Barmar Jul 15 '14 at 09:09
@dreamweiver This is the correct answer. I'm not sure how what you link to explains the `onLoad` call. – Dimitar Dimitrov Jul 15 '14 at 09:16

Dhaval Bharadva · Answer 3 · 2014-07-15T08:51:32.910

1

Try jQuery append() Method

function onLoad() {
    $( document ).ready(function(){
        var uname = $(this).data('at-uname');
        $( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>')
    });
}

edited Jul 15 '14 at 08:51

answered Jul 15 '14 at 08:46

Dhaval Bharadva

3,053
2
24
35

score 0 · Answer 4 · answered Jul 15 '14 at 08:47

I thnik there is no need for a docment ready in a function.. you could try just like this:....

function onLoad() {
    var uname = $(this).data('at-uname');
    $( "a.online-name" ).append('<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname="' + uname + '"></li>');
}

but $(this) ?? you will have to get that some how with a selector...

score 0 · Answer 5 · answered Jul 15 '14 at 09:29

you can use the jquery append to add the content to the end of the node or use prepend to add it to the begining to the node

$( document ).ready(){
    var uname = $(this).data('atUname');

    // use append instead of Add to add the content to the end of the node 
    $( "a.online-name" ).append(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)

    // or use prepend to add teh content to the bengining to the node
    $( "a.online-name" ).prepend(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)

    // or use html to replace the content 
    $( "a.online-name" ).html(<li class="shout-at_12 clickable mr at-shout pause-shout" title="@" data-at-uname=" + uname + "></li>)
}

How to add a new HTML node using jQuery

5 Answers5