Разобрать код HTML из базы данных и отобразить его в div

Question

Я сейчас очень запутался ..

У меня есть небольшая форма с текстовой областью, и я использую TinyMCE в качестве редактора WYSIWYG, чтобы упростить написание кода html. Затем я отправляю этот код в базу данных, где у меня есть столбец с именем content. Пример содержимого этого столбца:

<p style="text-align:center;>This is a simple <strong>test</strong></p>

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

Поэтому я сначала создал div с <div id="contentToShow"></div>. Затем у меня есть табличная ячейка, не отображаемая, которая содержит полный контент, и у меня есть еще одна табличная ячейка, которая содержит «усеченные» данные:

<td style="display:none;" class="fullContent">{{@myVar.content}}</td>
<td class="clickToShowFullContent">{{substr(@myVar.content,0,50)}}[....]</td>

Теперь я написал следующее jQuery по порядку чтобы попытаться отобразить результат в div:

$('.clickToShowFullContent').click(function(){
          var content = $(this).prev().html();
          var $jquery_content = $($.parseHTML(content));
          $('#contentToShow').html($jquery_content);
});

Теперь, в теории, это должно иметь смысл. В табличной ячейке с классом fullContent имеется полное содержимое (в виде строки). , Я читаю html ячейки таблицы и пытаюсь присвоить ее переменной, анализируя ее до действительного HTML с помощью $.parseHTML(). Затем я пытаюсь установить содержимое только что созданной переменной.

Однако, в конце концов, я вижу только код html вместо проанализированного HTML.

Что я делаю не так? Почему он отображает код вместо проанализированного html?

РЕДАКТИРОВАТЬ: Вот как выглядит <td> после вставки содержимого

<td style="display:none;" class="fullContent">&lt;p&gt;test123&lt;strong&gt;tqetqetqetqetqetqetqqe&lt;/strong&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;strong&gt;wqeqweqweqweqweeqweqweqweqwe&lt;/strong&gt;&lt;/p&gt;
&lt;h1 style="text-align: center;"&gt;&lt;em&gt;&lt;strong&gt;asfafsafasfasf&lt;/strong&gt;&lt;/em&gt;&lt;/h1&gt;</td>

При попытке воссоздать его в скрипка, все работает, вы можете проверить это здесь

Answer 1

Ладно, у меня все заработало ...

Кажется, проблема была в планшете ..

Я изменил его на следующее:

<td style="display:none;" class="fullContent"><input type="hidden" value="{{@myVar.content}}"/></td>

, а затем получить к нему доступ с помощью javascript, используя:

var content = $(this).prev().children().val();

, после чего следует тот же метод преобразования, и теперь он работает ... не знаю точно, почему, но у меня все получилось, думаю вот это главное :) 1011 *