dynamically create element using jquery

Question

I am trying to create element using jquery. When i click on a link, i want to create an element "p", give it some text, and then put it in one of my divs. Also, i want to check which link is clicked on, so i can put the created "p" in the right div. Any solutions on where i am doing it 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>

First of all.. your var text = $(document.createElement('p'); misses a closing bracket — Corfitz.
– Corfitz., Commented Feb 6, 2013 at 9:12
Are you using a variable in a condition inside a function whose return value should be said variable? var a = $("#menu").find('a').each(function(){ if(a == "l1"){ — Seimen
– Seimen, Commented Feb 6, 2013 at 9:26

VisioN · Accepted Answer · 2013-02-06 09:12:54Z

24

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

$("<p />", { text: "Hej" }).appendTo("#contentl1");

answered Feb 6, 2013 at 9:12

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

Comments

Simon Edström · Accepted Answer · 2013-02-06 09:12:05Z

2

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

answered Feb 6, 2013 at 9:12

Simon Edström

6,6178 gold badges34 silver badges52 bronze badges

Comments

James Donnelly · Accepted Answer · 2013-02-06 09:14:06Z

1

For a start the click function can be done like this instead of having to use .find():

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

The .each() loop can be done like:

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

answered Feb 6, 2013 at 9:14

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Comments

fmsf · Accepted Answer · 2013-02-06 09:18:16Z

1

I know it doesn't realate to answering your question but it is hard 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 issue:

function createElement() {
  if($(this).attr("id") == "l1"){
   $("#contentl1").append('<p>hej</p>');
  }
}

$("#menu a").each(function () {
    $(this).click(function () {
        createElement.apply(this);
    });
});

edited Feb 6, 2013 at 9:18

answered Feb 6, 2013 at 9:12

fmsf

37.2k49 gold badges155 silver badges196 bronze badges

Comments

Seimen · Accepted Answer · 2013-02-06 09:32:10Z

0

Something like this fiddle?

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

answered Feb 6, 2013 at 9:32

Seimen

7,2942 gold badges30 silver badges42 bronze badges

Comments

schnill · Accepted Answer · 2013-07-26 10:07:16Z

0

try this script, it'll do place the text in 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>");
    });
});


});

answered Jul 26, 2013 at 10:07

schnill

9551 gold badge5 silver badges13 bronze badges

Comments

Timothy C. Quinn · Accepted Answer · 2021-09-08 20:29:30Z

0

I personally like to use classic JS DOM for tasks so this is how you can first create the DOM object using JQuery. The DOM object returned is the outer element of HTML (p tag) but the inner HTML can be as complex as you want.

var elP = $("<p>Hej</p>")[0]
// Do some other DOM manipulations of p
// eg: elP.someCustomTag='foobar'

$("#content1").append(elP)

answered Sep 8, 2021 at 20:29

Timothy C. Quinn

4,6391 gold badge47 silver badges56 bronze badges

Collectives™ on Stack Overflow

dynamically create element using jquery

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related