создать HTML с JQuery

Question

Мне нужно создать такие строки:

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

Я действительно спотыкаюсь об этом, например, я могу создать <li><span>, но когда я пытаюсь добавить к нему текст, мой диапазон исчезает.

Возможно, это довольно легко, но я не могу это сделать. О да, многое можно сделать с помощью однострочного решения. Меня не волнует, что он компактный, я предпочитаю четкое решение (хотя однострочные решения могут быть ясными).

здесь jsfiddle:

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

Answer 1

Хорошо, поехали:

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

В твоем цикле я сделал так:

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

Надеюсь, я все понял!

Answer 2

Я не уверен, что это то, что вы имеете в виду, но добавление

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

, кажется, работает. Обновленная скрипка Просто измените строку с соответствующими переменными, например

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

и т. Д.

Answer 3

Таким образом, простое решение здесь было бы разбить его на части.
Каждый раз, когда вы делаете утверждение, оно может возвращать вновь созданный элемент.

Давайте посмотрим на ваш пример -

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

Для начала возьмем базовый объект - скажем, например, элемент <ul>, к которому вы хотите добавить -

Это предполагает элемент <ul>например, <ul id="someList"></ul> в разметке HTML.

var myList = $("#someList"); 

и добавление к нему другого нового <li> элемента, возвращающего его новому объекту

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

Отлично!мы зашли так далеко - теперь мы добавляем <span>

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

Я сделал это очень широко - нет необходимости выполнять каждую операцию в отдельной команде.В jQuery есть фантастическая функция под названием chaining.

Что означает связывание (как следует из названия), так это то, что вы можете связывать функции вместе.Я уже привел пример в приведенном выше коде

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

Как видите, я добавляю элемент <span> и сразу после вызова функции text().Это возможно, потому что большинство, если не все встроенные функции jQuery (действительно любые хорошо построенные плагины) будут возвращать сам объект при его выходе.

Например -

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

Позволит нам сделать это -

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

, потому что каждая функция (* hiccup *) вернетсяеще одно холодное пиво!

Ура!

http://howthewestisfound.com/images/Misc/beer_pour.gif

Answer 4

Вы можете создать HTML с помощью jQuery, используя атрибут .html ().Например.

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

РЕДАКТИРОВАТЬ:

Хорошо, возможно, я неправильно понял ваш вопрос.Это хорошо, если вы хотите создать HTML с использованием jQuery, что, я думаю, вы могли бы сделать.Но, глядя на ваш jsFiddle, похоже, что вы просто хотите вставить теги <span> в определенные теги <li>.В любом случае, я не использовал ваш jsFiddle, вместо этого я заново создал его с вашей разметкой и очень простыми примерами того, как вы можете сделать это с помощью jQuery.

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

Также здесь естькод JQuery.Если вы просто хотите вставить интервалы в теги <li>, лучше использовать метод .prepend().

$(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>");

});