how to replace [text] with style in js or jquery "[shortcodes]"

Question

I've blog of blogger and I saw some blogs used short code , when i try make one by this code

   $('#id1 p').each(function() {
        var text = $(this).text();
        $(this).text(text.replace('[dogsss]', '<style>#id1{background:#000;}</style>')); 
    });
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1">
 <p>
   apple
 </p>
 <p>
   ball
 </p>
 <p>
   cat
 </p>
 <p>
   [dogsss]
 </p>
</div>

[dogsss] replaced to <style>#id1{background:#000;}</style> that example https://jsfiddle.net/uwrzh03z/

Answer 1

You would need to use .html instead of .text, though, nothing about this feels right.