Как получить содержимое элемента в виде html кода?

Question

[Gregory Kocharyan]

есть html-код а-ля:

<div class="habbit-progress">
  <div>
    <h4>Habbit Progress</h4>
  </div>

  <div class="progress-check-mob visible-xs">
    <ol>
    </ol>
  </div>

  <div class="progress-check hidden-xs"></div>
</div>

в тег ol с помощью обработчика событий .on("click") дописывается html-код из элементов списка li. Пробовал метод .html(),но он не видит код который дописывает JavaScript.
т.е Если просматривать код страницы то я вижу:

<div class="habbit-progress">
  <div>
    <h4>Habbit Progress</h4>
  </div>

  <div class="progress-check-mob visible-xs">
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>

  <div class="progress-check hidden-xs"></div>
</div>

а конструкция $(".habbit-progress").html(); выдает все тоже самое без элементов, которые вставляет javascript.

Answer 1

[Алексей]

У вас div содержит только заголовок h4 и тут же закрывается.
$(".habbit-progress").html();
Теги li хранятся уже совсем в другом div.
Ваш html код не соответствует оформлению. Это не ошибка с точки зрения валидации браузера. Но она вас самого путает. Отформатировал код, так как он у вас написан.

<div class="habbit-progress">
	<h4>Habbit Progress</h4>
</div>

<div class="progress-check-mob visible-xs">
	<ol>
	 <li></li>
	 <li></li>
	 <li></li>
	</ol>
</div>

<div class="progress-check hidden-xs"></div>

Сразу видно, что любые изменения во втором блоке не приведут к изменению в первом блоке.

Comments

[Gregory Kocharyan]

я, наверное, не совсем точно указал, но суть сводится к тому, что даже написав:

var content = $(".progress-check-mob").html();
alert(content);

я получаю содержимое без li, хотя они там есть.. :

<div class="progress-check-mob visible-xs">
  <ol>
  </ol>
</div>

[Gregory Kocharyan]

я просто проверял, что если теги li изначально есть в разметке то все выдает правильно, а если они добавляются скриптом, то метод html() их пропускает

[Алексей]

Надеюсь что div с классом progress-check-mob единственный на странице, иначе нужно обращаться по id.

// сначала в переменную сохраняем div
var content = $(".progress-check-mob");
// потом можно дописать туда li
content
.append('<li>Первое</li>')
.append('<li>Второе</li>')
.append('<li>Третье</li>');
//А теперь можете воспользоваться alert и посмотреть что получилось.
alert( content.html() );

[Gregory Kocharyan]

AlexMaxTM: Странно и правда все работает набрал похожий пример в JSFiddle все работает...

причем я пользуюсь ровно такими же методами, но у меня пустой блок выдает...

Слушайте, может глянете исходники мои на гитхабе.. я просто новичок и что-то не могу понять почему одно и тоже здесь и JSFiddle работает а у меня нет..
https://github.com/Groyreg/Task-Checker

Отпишитесь мне здесь, если несложно.
Спасибо.

[Gregory Kocharyan]

AlexMaxTM: вроде разобрался... вопрос был в видимости переменных. Инициировал переменную в другом месте и заработало. Спасибо, что натолкнули на решение :)

Answer 2

[Uwe_Boll]

var content = '<li>что то</li>';
if($('.progress-check-mobs > ol li').length < 0 ){
$(".progress-check-mobs > ol").append(content);
}

ТЫЦ