17

I have a a link that looks similar to this

<a href="/home/category/blog/1" id="blog">Blog</a>

As you can the link has an ID of 'blog' what I want to do is to create an div on the fly with the ID from the link that was clicked so if the 'blog' is clicked, then the markup would be

<div id="blog">
<!--some content here-->
</div>

Like wise if for instance the news link is clicked then I would like,

<div id="news">
<!--some content here-->
</div>

to be created in the markup if this possible? and how Im pretty new to jQuery.

Yacoby
  • 54,544
  • 15
  • 116
  • 120
Udders
  • 6,914
  • 24
  • 102
  • 194

9 Answers9

11

Try this: 

$("a").click(function(){
    $("#wrapper").append("<div id=" + this.id + "></div>");
});

Not tested, should work ;) where: #wrapper is parent element, work on all a as you see.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
IProblemFactory
  • 9,551
  • 8
  • 50
  • 66
  • 1
    The ID attribute must be unique like others said (http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)... If you want the same ID I guess it is to refer to it somewhere after having created it? Referring to a duplicated ID is undefined by the w3c and god knows how the different browsers will choose between them. I would suggest you use this technique with the class attribute instead. – Mike Gleason jr Couturier Dec 08 '09 at 17:03
  • Don't use `$(this).attr('id')` when `this.id` will do. Even after that this is still a bad answer, because of the repeating `id` attribute. – Yi Jiang Nov 03 '10 at 11:51
8

You will need to give the div a different ID. Perhaps you could give it a class instead:

$("#blog").click(function() {
  $(this).after("<div class='blog'>...</div>");
  return false;
});

That's just one of many ways to create a div. You probably also want to avoid duplicates however in which case, use something like this:

$("#blog").click(function() {
  var content = $("#blog_content");
  if (content.length == 0) {
    content = $("<div></div>").attr("id", "blog_content");
    $(this).after(content);
  }
  content.html("...");
  return false;
});

As for how to handle multiple such links I would do something like this:

<a href="#" id="blog" class="content">Blog</a>
<a href="#" id="news" class="content">News</a>
<a href="#" id="weather" class="content">Weather</a>
<div id="content"></div>

with:

$("a.content").click(function() {
  $("#content").load('/content/' + this.id, function() {
    $(this).fadeIn();
  });
  return false;
});

The point is this one event handler handles all the links. It's done cleanly with classes for the selector and IDs to identify them and it avoids too much DOOM manipulation. If you want each of these things in a separate <div> I would statically create each of them rather than creating them dynamically. Hide them if you don't need to see them.

cletus
  • 616,129
  • 168
  • 910
  • 942
5

Try This : 

<a  id="blog">Blog</a>
<a  id="news">news</a>
<a  id="test1">test1</a>
<a  id="test2">test2</a>

$('a').click(function()
             {
                 $('<div/>',{
                     id : this.id,
                     text : "you have clicked on : " + this.id
                 }).appendTo("#" + this.id);
             });
Nishant Kumar
  • 5,995
  • 19
  • 69
  • 95
3

First of all you should not make 2 elements with same ID. At your example a and div will both have id="blog". Not XHTML compliant, plus might mess up you JS code if u refernce them.

Here comes non-jquery solution (add this within script tags):

function addDiv (linkElement) {
  var div = document.createElement('div');
  div.id = linkElement.id;
  div.innerHTML = '<!--some content here-->';
  document.body.appendChild(div); // adds element to body
}

Then add to HTML element an "event handler":

<a href="/home/category/blog/1" id="blog" onClick="addDiv(this); return false;">Blog</a>
Tomasz Durka
  • 586
  • 2
  • 9
2

This question describes how to create a div. However, you shouldn't have two elements with same IDs. Is there any reason why you can't give it an id like content_blog, or content_news?

Community
  • 1
  • 1
Yacoby
  • 54,544
  • 15
  • 116
  • 120
1

Unfortunately if you click on a link the page you go to has no idea what the idea of the link you clicked was. The only information it knows is what's contained in the URL. A better way to do this would be to use the querystring:

<a href="/home/category/blog/1?id=blog">Blog</a>

Then using the jQuery querystring plugin you could create the div like:

$("wrapper").add("div").attr("id", $.query.get("id"));
Chris Van Opstal
  • 36,423
  • 9
  • 73
  • 90
1

You shouldn't have elements in your page with the same ID. Use a prefix if you like, or perhaps a class.

However, the answer is as follows. I am imagining that your clickable links are within a div with the ID "menu", and your on-the-fly divs are to be created within a div with the ID "content".

$('div#menu a').click(function(){
    $('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});

Any problems, ask in the comments!

Gausie
  • 4,291
  • 1
  • 25
  • 36
0

Also the following statement is available to create a div dynamically.

$("<div>Hello</div>").appendTo('.appendTo');

Working fiddle: https://jsfiddle.net/andreitodorut/xbym0bsu/

Andrei Todorut
  • 4,260
  • 2
  • 17
  • 28
-1

you can try this code

$('body').on('click', '#btn', function() {
  $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
  width: 100px;
  background: gray;
  color: white;
  height: 20px;
  font: 12px;
  padding-left: 4px;
  line-height: 20px;
  margin: 3px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div>
      <!-- Button trigger modal -->
      <button type="button" id="btn">Create Div</button>
      <div id="old">

      </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>
MEAbid
  • 560
  • 7
  • 11