Question

I have that code

var p = document.createElement('p');
var a = document.createElement('a');

$(a).attr('href', 'http://www.my-site.com');
$(a).attr('title', 'My Site');
$(a).attr('target', '_blank');
$(a).attr('id', 'l');
$(a).html('<strong>m<span style="color: #D70080 !important;">Y</span> site</strong>');

$(p).attr('id', 'b');
$(p).attr('style', 'text-align: right');
$(p).html('Powered by ' + $(a).html());

$('#wp_phpbb_bridge_options').parent('div').append(p);

Why that return me:

Powered by mY site

as a text ? without link ?

The html that I expect to return with that code is this:

<p style="text-align: right;" id="b">
    Powered by <a href="http://www.my-site.com" title="My Site" target="_blank" id="l"><strong>m<span style="color: #D70080 !important;">Y</span> site</strong></a>
</p>

Answer 1

because the html() on the <a> element returns the innerHTML. In your case that’s the text of the link.

You should do:

$(p).html('Powered by ').append($(a));