javascript - 如何使用 jQuery 添加新的 HTML 节点

Question

所以我和我的 friend 正在尝试为网站制作用户脚本，但无法解决这个问题。我们希望从网站的 shoutbox 添加一个脚本，并将其添加到右侧的名称中，以便能够在此处用他们的名字 @people。

@simple 的脚本在这里，它已经在站点 HTML 中，我们只是想移动它。

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

我们目前的尝试是——

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>)
    }
}

但没有成功。整个页面的 HTML 可以在这里找到 - http://pastebin.com/J6kk6LSn

我们使用的插件是 Greasemonkey 如果它有帮助的话，我们已经尝试了几个小时但无济于事。如果有人可以提供帮助，我们将不胜感激。

Answer 1

你需要纠正两件事:
1. 正确语法 data-at-uname阅读 - 看下面的代码
2. 添加 html 节点 - 将 html 放在单引号中并使用 .append()

使用下面的代码:

$( 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>');
});

编辑:根据讨论，OP 想为 <span class="online-name" 中的每个 anchor 添加 li ，所以这里是代码:

 $(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>');
    });
  });