How to add These HTML Tag in $('body').append Script?

Question

Javascript developer,

i have this script which i display html dynamically in my template :

$(document).ready(function() {
    var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">Designed Templatezy</div></div></div>');
});

Now i want to add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> to that wrapleft div but its not working to display the blog title and nor it add the url of site.

Hint: this is a <a expr:href='data:blog.homepageUrl'> html/expression tag in blogger template which create link for your site homepage. like http://example.com where as <data:blog.title/> is a tag which display your blog title like "Stack Overflow". it is easy to add in a template but i found it hard when adding it to that append script.

I tried like below but thats not working:

$(document).ready(function() {
    var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"><a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a></div><div id="wrapright">Designed Templatezy</div></div></div>');
});

So please anyone help me to add this <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> after the wrapleft div in that append script. thanks.

---

Updates:

i can add as general link in the script: like a href stackoverflow.com

$(document).ready(function() {
    var credits= $('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"><a href="stackoverflow.com">stackoverflow</a></div><div id="wrapright">Designed Templatezy</div></div></div>');
});

and this work, but how to add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> in the script to work, it is simple to add in template and display title of site with title, but how to add in that script inside append after leftwrap. i add it but it comes as plain texts.

Answer 1

Since you are using a template language, the template language might be processed before the output reaches the browser. If it is not, if it is somehow handled after it reaches the browser, then jQuery might be attempting to strip unwanted code from .html() and instead may not recognize the tags. You can also use .text() if you want something a little more cut-and-dry.

However, to answer your question in the purest form (via jQuery).

In your second example you wrapped everything in a div tag but this can be accomplished using .wrap() ... what you should do is use the selector to locate what segment of the page you want. Also, please note you wrote "wrapp-inner" not "wrap-inner" ...

Let's go back to your original issue. You want append a link to the bottom of a page. In the doc ready function:

$('body').append("somehtml"); // append to body

However, to maintain sanity, instead you should create a "target" div to populate. Example:

HTML (in body):

<div id="credits"></div>

In Document Ready:

$('#credits').append("somehtml");

See this jsfiddle which demonstrates both. https://jsfiddle.net/83fbnwe4/

And this shows the distinction between .html() and .append, as well as a way to .html() to effectively append:

https://jsfiddle.net/83fbnwe4/2/

Update

To include the other answer with some additional approach, basically you could display it from the jump and hide it with CSS, or hide it with jQuery:

$('#mylink').hide();

If you want to make the href dynamic -- populate it later than the time the code is rendered by your template parser - or if including content based on an AJAX request or simply via javascript event in some way, you can change it after the fact using DOM parsing.

// Simple:
$("#mylinkid").attr('href', 'http://www.live.com/');

//Complicated: 
$("a[href^='http://stackoverflow.com']").each(function() {
 this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
 http://stackoverflow.com");
});

(borrowed from How to change the href for a hyperlink using jQuery #179713)

Answer 2

A possible solution:

You can add <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a> in your template as:

<div id="blogHomepageUrlLink" style="display: none;">
    <a expr:href='data:blog.homepageUrl'><data:blog.title/>™</a>
</div>

So your template handler can process it.

Then with your jQuery:

$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft"></div><div id="wrapright">Designed Templatezy</div></div></div>');

You should be able to add the link with:

$("#wrapleft").html($("#blogHomepageUrlLink").html());

Or combined:

$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'+$("#wrapleft").html($("#blogHomepageUrlLink").html())+'</div><div id="wrapright">Designed Templatezy</div></div></div>');