CODEWITHSUNDEEP
javascriptjquery
Udders
Udders

Reputation: 6976

Javascript creating <div> on the fly

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.

Upvotes: 16

Views: 24045

Answers (9)

Andrei Todorut
Andrei Todorut

Reputation: 4526

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

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

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

Upvotes: 0

MEAbid
MEAbid

Reputation: 550

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>

Upvotes: -1

Nishant Kumar
Nishant Kumar

Reputation: 6083

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

Upvotes: 5

AbstractProblemFactory
AbstractProblemFactory

Reputation: 9811

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.

Upvotes: 11

cletus
cletus

Reputation: 625047

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.

Upvotes: 8

Tomasz Durka
Tomasz Durka

Reputation: 586

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>

Upvotes: 3

Gausie
Gausie

Reputation: 4359

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!

Upvotes: 1

Chris Van Opstal
Chris Van Opstal

Reputation: 37547

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

Upvotes: 1

Yacoby
Yacoby

Reputation: 55445

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?

Upvotes: 2

Related Questions