create html with jquery

问题

I need to create lines like this:

        <li data-target="c1.html"><span>I. </span><span>Het tijdperk der goden</span></li>

I really stumble with it, for example i can create <li><span> but when i try to add text to it then my span is gone.

It's probably quite easy but i can't get it done. O yeah a lot of things can be done with a one-line solution. I don't care much about it being it compact, i prefer a clear solution (although one-line solutions can be clear).

here the jsfiddle:

http://jsfiddle.net/nCs99/1/

回答1:

Ok, here we go:

http://jsfiddle.net/nCs99/3/

In your for loop I did like this:

for(var i = 0; i < content.data.length; i++) {
    var item =  content.data[i];
    var ch = item.ch;
    var name = item.name;
    var target = item.target;

    // i need to create this:
    // <li><span>I. </span><span>Het tijdperk der goden</span></li>

    var li = $("<li>")
    var span = $('<span>');
    span.html("test");
    var span2 = $("<span>");
    span2.html(ch);
    li.append(span);
    li.append(span2);
    list.append(li);
}

Hope I got it right!

回答2:

I am not sure if this is what you mean but adding

list.append("<li><span>I. </span><span>Het tijdperk der goden</span></li>");

seems to work. Updated fiddle Just modify the string with the proper variables, like

list.append("<li><span>" + name + "</span><span>Het tijdperk der goden</span></li>");

etc.

回答3:

You can create HTML with jQuery by using the .html() attribute. For example.

$('ul').html("<li class='myclass'><span>some stuff</span>My text here</li>");

EDIT:

Okay I might have misunderstood your question. This is good if you want to create the HTML using jQuery, which is what I think you might want to do. But by looking at your jsFiddle it looks like you just want to insert <span> tags into certain <li> tags. Anyways, I didn't use your jsFiddle, instead I recreated one with your mark-up and very basic examples of how you can do this with jQuery.

http://jsfiddle.net/krishollenbeck/6XN5C/

Also here is the jQuery code. If you just want to insert spans into the <li> tags the .prepend() method would be a better option.

$(document).ready(function(){

   // To insert into an existing tag
   $('.roman li').prepend('<span>I.</span>');

   //To Create a new tag inside of another
   $('#demo-ul').html("<li><span>I.</span>Het tijdperk der goden</<li>");

});

回答4:

So a simple solution here would be to break it up into parts.
Each time you make a statement it can return the newly created item.

Lets look at your example -

<li data-target="c1.html"><span>I. </span><span>Het tijdperk der goden</span></li>

We'll take a base object to start with - let us say for example the <ul> element that you are wanting to append to -

This assumes a <ul> element like <ul id="someList"></ul> to be in the HTML markup.

var myList = $("#someList");

And append to it another new <li> element returning it to a new object

var newElement = myList.append('<li data-target="c1.html"></li>');

Great! we got this far - now we add the <span>'s

var firstSpan = newElement.append('<span></span>').text('I. ');
var secondSpan = newElement.append('<span></span>').text('Het tijdperk der goden');

I've gone about this in a very spread out way - there is no need to perform each operation in a different command. jQuery has a fantastic feature called chaining.

What chaining means (as the name imply's) is that you can chain functions together. I already gave an example in the code above

var firstSpan = newElement.append('<span></span>').text('I. ')

As you can see I am appending the <span> element and immediately after calling the text() function. This is possible because most if not all built-in jQuery functions (an indeed any well built plugins) will return the object itself when it exits.

For example -

var coldBeer = new Object();
coldBeer.drink = function(){
  // gulp...gulp...
  console.log('gulp...gulp...')
  return this;
}

coldBeer.refill = function(){
  // drunk...drunk...
  console.log('drunk...drunk...')
  return this;
}

Would allow us to do this -

coldBeer.drink().refill().drink().refill().drink();

because each function (* hiccup *) would return another cold beer!

Cheers!

_{(source: howthewestisfound.com)}

来源：https://stackoverflow.com/questions/9968866/create-html-with-jquery

标签

jquery

html

append