create Html elements using jquery

Question

how can I create something like below div using jquery? preferably using something similar to $(document.createElement('div')); or something faster apart from $("<div spry:region="myDs">{hostname}</div>");

<div spry:region="myDs">
 {hostname}
</div>

Edited

How to put this code in another JS file and use it, coz "<%= request.getParameter(\"filepath\") %>" is creating problem

var cpath="<%= request.getParameter(\"filepath\") %>";
var myDs = new Spry.Data.XMLDataSet(cpath, "csmclient/system"); 
$(document).ready(function(){
 $('<div>') // Creates the element
 .attr('spry:region','myDs') // Sets the attribute spry:region="myDs"
 .html('{hostname}') // Sets the inner HTML to {hostname}
 .appendTo('body');
});

• Quentin: I doubt you can. jQuery is designed to work with HTML, not multi-namespace XML documents.
• AabinGunz: @Quentin: I edited my question can you please take a look? thanks
• Tomas Aschan: I took the liberty of rolling back your question to the latest edit that has an answer in this thread, since you were asking new questions in this one. If you can't wait untill tomorrow, when your question quota has room for some new ones, meta is the place to complain about it.
• Lasse V. Karlsen: Please don't change the meaning of questions after you've posted them, and at the very least, not after getting answers. One of the reasons behind the limit on number of questions per month is to avoid swamping the site with questions from people that don't have a long experience in their field, such as HTML and/or JavaScript.
• AabinGunz: @Lasse V.: I'll keep that in mind for next time. :)

Answer 1

I'm surprised no one has yet fully made use of jQuery's chaining capabilities:

$('<div>') // Creates the element
 .attr('spry:region','myDs') // Sets the attribute spry:region="myDs"
 .html('{hostname}') // Sets the inner HTML to {hostname}
 .appendTo('body') // Append the newly created element to body

Here's a jFiddle example that shows it in action.

UPDATE in response to your edit
You won't be able to use the Request object in an external javascript file like that, since the external script file is fetched by the browser in a separate request. You could easily solve the problem by writing an ASP.NET Handler script that returns your javascript file, by doing the following:

1. Create a new handler in your ASP.NET project. Name it something sensible, like yourscriptname.js.ashx.
2. Copy all your javascript code into the right place in the handler (you probably want a Response.Write() call or something...
3. Change the src tag of your <script> element from somefile.js to somefile.js.asp?filepath=your/file.path.

This way, when the request for the javascript is sent by the browser, the request object has a value for "filepath" and everything will work again. Of course, you'll want to change your/file.path to something more relevant when you render it in the first place, in order to get the value from the request parameters to the page.

• AabinGunz: @Tomas: Can you look around my code in my edited question, as i want to use it in a external JS file but "<%= request.getParameter(\"filepath\") %>" seems to be creating the problem. Thanks
• AabinGunz: @Tomas: I am using normal jsp, is there any other way with jsp?
• AabinGunz: @Tomas: Also, what if my html content is very large, what will be the best way to create then, and if I put some anchor tags and call some function from within will they work. Please have a look at my edited question. Thanks
• Tomas Aschan: @Abhishek: Now your follow-up questions are more like new questions than actual follow-ups - I think you'll be better off creating entirely new questions rather than editing an old one. If you want the old question(s) as background, you can always provide a link in the new question. As for creating large html elements, I'd go for an ajax request for a html template on your server, possibly utilizing jQuery Templates.
• AabinGunz: @Tomas: I am not allowed to ask any more questions. It says only 50 questions in 30days :)

Answer 2

To create elemts in jQuery and append them:

jQuery('<div/>', {
 "spry:region": "myDS",
 text: '{hostname}'
}).appendTo('body');

look here for full reference

Answer 3

First of all, document.createElement('div') is javascript, not jQuery. If you don't want to use jQuery:

var main = document.getElementById('main');//where you want the div to be added
var div = document.createElement('div');
div.setAttribute("spry:region","myDs");
div.innerHTML = "{hostname}";
main.appendChild(div);

But jQuery makes easier to work with the DOM, so you can use one of the above answers :) .

• Vithozor: It should work if you edit the first line with some element you have on your page. That's why there is a comment near the line. Maybe you want to append it to the body, in that case, use "document.body.appendChild(div);" instead of using the var main.

Answer 4

$("html tags").appendTo("where you want to add")

$('<div spry:region="myDs">{hostname}</div>').appendTo("body")
$('<div spry:region="myDs">{hostname}</div>').appendTo("#content")

or

var div = $(document.createElement('div'));
div.html("{hostname}").attr('spry:region=', "myDs").appendTo("body")

• Chris May: If you want to do the above with less typing, $("<div>", {"spry:region": "myDs", "html": "hostname"}).appendTo("#content") should work too.
• AabinGunz: @Chris: Can you look around my code in my edited question, as i want to use it in a external JS file but "<%= request.getParameter(\"filepath\") %>" seems to be creating the problem.