Javascript creating <div> on the fly

Question

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.

You want two different DOM elements to have the same ID? Are you certain? — Upperstage
– Upperstage, Commented Dec 8, 2009 at 13:52
Do you want the new markup to be created on the current page? Or the page the link redirects to? — Chris Van Opstal
– Chris Van Opstal, Commented Dec 8, 2009 at 13:56
If you want to refer to two separate things with a single property, use the class attribute instead. — Mike Gleason jr Couturier
– Mike Gleason jr Couturier, Commented Dec 8, 2009 at 14:02

Yi Jiang · Accepted Answer · 2010-11-03 11:50:12Z

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.

edited Nov 3, 2010 at 11:50

Yi Jiang

50.2k16 gold badges139 silver badges137 bronze badges

answered Dec 8, 2009 at 13:55

AbstractProblemFactory

9,8518 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Gleason jr Couturier Over a year ago

The ID attribute must be unique like others said (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.

Yi Jiang Over a year ago

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.

cletus · Accepted Answer · 2009-12-08 14:03:23Z

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.

edited Dec 8, 2009 at 14:03

answered Dec 8, 2009 at 13:54

cletus

627k169 gold badges922 silver badges945 bronze badges

1 Comment

Yacoby Over a year ago

+1 for the detailed examples and the additional ways of doing things

Nishant Kumar · Accepted Answer · 2013-08-27 07:19:02Z

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

answered Aug 27, 2013 at 7:19

Nishant Kumar

6,13120 gold badges72 silver badges97 bronze badges

Comments

Tomasz Durka · Accepted Answer · 2009-12-08 13:59:55Z

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>

answered Dec 8, 2009 at 13:59

Tomasz Durka

5862 silver badges9 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:17:18Z

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?

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Dec 8, 2009 at 13:54

Yacoby

55.6k16 gold badges119 silver badges121 bronze badges

Comments

Chris Van Opstal · Accepted Answer · 2009-12-08 13:55:48Z

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"));

answered Dec 8, 2009 at 13:55

Chris Van Opstal

37.7k10 gold badges77 silver badges91 bronze badges

Comments

Gausie · Accepted Answer · 2009-12-08 13:56:32Z

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!

answered Dec 8, 2009 at 13:56

Gausie

4,3891 gold badge28 silver badges37 bronze badges

Comments

Andrei Todorut · Accepted Answer · 2018-01-25 10:57:51Z

0

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

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

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

answered Jan 25, 2018 at 10:57

Andrei Todorut

4,5762 gold badges19 silver badges27 bronze badges

Comments

MEAbid · Accepted Answer · 2016-10-14 12:19:49Z

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>

Collectives™ on Stack Overflow

Javascript creating <div> on the fly

9 Answers 9

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related