CODEWITHSUNDEEP
javascriptjqueryhtmlcreateelement
DrWooolie
DrWooolie

Reputation: 8055

dynamically create element using jquery

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>

Upvotes: 10

Views: 36041

Answers (7)

Timothy C. Quinn
Timothy C. Quinn

Reputation: 4475

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)

Upvotes: 0

schnill
schnill

Reputation: 955

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


});

Upvotes: 0

Seimen
Seimen

Reputation: 7250

Something like this fiddle?

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

Upvotes: 0

fmsf
fmsf

Reputation: 37137

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

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128781

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

Upvotes: 1

VisioN
VisioN

Reputation: 145368

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

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

Upvotes: 24

Simon Edstr&#246;m
Simon Edstr&#246;m

Reputation: 6619

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

Upvotes: 2

Related Questions