Geek Answers Handbook

Dynamically create an element using jquery

I am trying to create an element using jquery. When I click on the link, I want to create an "p" element, give it text, and then put it in one of my divs. In addition, I want to check which link to click, so I can put the created "p" in the right div. Any decisions on where I am doing this wrong?

Javascript / jquery

$(document).ready(function () { function createElement() { var a = $("#menu").find('a').each(function(){ if(a == "l1"){ var text = $(document.createElement('p'); $('p').text("Hej"); $("#contentl1").append("text"); } }); } $("#menu").find('a').each(function () { $(this).click(function () { createElement(); }); }); createElement(); });

HTML

  <html> <head> <title>Inl1-1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style-1.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="Uppg1.js"></script> </head> <body> <ul class="meny" id="menu"> <li><a href="#" id="l1">Utvärdering/Feedback</a></li> <li><a href="#" id="l2">Kontakt</a></li> <li><a href="#" id="l3">Öppettider</a></li> <li><a href="#" id="l4">Om Asperöd</a></li> </ul> <div id="contentl1"> </div> <div id="contentl2"> </div> <div id="contentl3"> </div> <div id="contentl4"> </div> </body> </html>
+4
source share
6 answers

Here is the best way to add a new <p> element with the text "Hej" in #contentl1 using jQuery:

 $("<p />", { text: "Hej" }).appendTo("#contentl1");
+13
source 
 function createElement() { var a = $("#menu").find('a').each(function(){ if(a == "l1"){ var p = $("<p>"); p.text("Hej"); $("#contentl1").append(p); } }); }
+2
source

I know that this does not allow you to answer your question, but it is difficult to leave this as a comment:

 var a = $("#menu").find('a').each(function(){ <-- this "a" will only be created after the each completes if(a == "l1"){ <-- this "a" that you are verifying is a global variable var text = $(document.createElement('p'); $('p').text("Hej"); $("#contentl1").append("text"); } });

You can try this to solve your problem:

 function createElement() { if($(this).attr("id") == "l1"){ $("#contentl1").append('<p>hej</p>'); } } $("#menu a").each(function () { $(this).click(function () { createElement.apply(this); }); });
+1
source

To get started, the click function can be performed as follows, instead of using .find ():

 $('#menu a').click(function() { }

The .each () loop can be executed as follows:

 $('#menu a').each(function () { var aId = $(this).attr('id'); var contentId = content + aId; $(contentId).append('<p>Hej</p>'); })
+1
source

Something like this violin ?

 $('#menu').on('click', 'a', function(e) { e.preventDefault(); $('<p>').text($(this).text()).appendTo('#content'+this.id); });
0
source

try this script, it will place the text in the correct div .

 $(document).ready(function () { $("#menu").find('a').each(function () { $(this).on('click',function () { $("#content"+$(this).attr("id")).append("<p>link "+$(this).attr("id")+" is clicked</p>"); }); }); });
0
source

More articles:


All Articles