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:
Ok, here we go:
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!
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.
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>");
});
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!
(source: howthewestisfound.com)
<ul> then this is not what you asked. If you'll be more clear about what you want we'll be able to help you much more. Jsfiddle is there to help out - don't rely only on it. Place your code in your post and only use JsFiddle for reference.