convert text to html inside id jquery

Question

I'm trying to convert the text to html inside my id

my PHP code is

<div id="post-content-<?= $post->id; ?>" data-ui-markdown data-ui-show-more style="overflow: hidden;">
  <?= humhub\widgets\RichText::widget(['text' => $post->message, 'record' => $post, 'markdown' => true]) ?>
</div>

i get as result in Elements

<div id="post-content-22" data-ui-markdown="" data-ui-show-more="" style="overflow: hidden;"><p><a href="https://ibb.co/f3hrTR" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/hi0Oa6/Chrysanthemum.jpg" alt="Chrysanthemum" border="0"&gt;</a> <br>
<a href="https://ibb.co/cCAOa6" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/kfhEhm/Desert.jpg" alt="Desert" border="0"&gt;</a> <br>
<a href="https://ibb.co/jCvZhm" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/i2Uuhm/Hydrangeas.jpg" alt="Hydrangeas" border="0"&gt;</a> <br>
<a href="https://ibb.co/gWVZhm" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/fzv0Nm/Jellyfish.jpg" alt="Jellyfish" border="0"&gt;</a></p></div>

and my jquery code

var CttText = $('#post-content-'+<?= $post->id; ?>).text();
$('#post-content-'+<?= $post->id; ?>).wrap(CttText);

but i get as result only the first Images, not the rest of the images.

Answer 1

Actually you want to show all 4 images inside post-content-22(for example). Isn't it?

If yes,you need to use .html() rather than .wrap()

Check below demo example:-

var CttText = $('#post-content-22').text();

$('#post-content-22').html(CttText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-content-22" data-ui-markdown="" data-ui-show-more="" style="overflow: hidden;"><p><a href="https://ibb.co/f3hrTR" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/hi0Oa6/Chrysanthemum.jpg" alt="Chrysanthemum" border="0"&gt;</a> <br>
<a href="https://ibb.co/cCAOa6" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/kfhEhm/Desert.jpg" alt="Desert" border="0"&gt;</a> <br>
<a href="https://ibb.co/jCvZhm" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/i2Uuhm/Hydrangeas.jpg" alt="Hydrangeas" border="0"&gt;</a> <br>
<a href="https://ibb.co/gWVZhm" rel="noopener noreferrer">&lt;img src="https://preview.ibb.co/fzv0Nm/Jellyfish.jpg" alt="Jellyfish" border="0"&gt;</a></p></div>

According to .wrap() definition :-

The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. A copy of this structure will be wrapped around each of the elements in the set of matched elements. This method returns the original set of elements for chaining purposes.

So in your case it's the div which actually got wrapped not the images (what you actually want to wrap inside div). And that's why only one images is shown with wrong HTML structure.