title: Manipulate html string with Jquery ( in Angular application for wysiwyg editor )
body: <p>I have a wysiwyg editor that uses a $scope.variable as it source of HTML.</p>
  
  <p>Now i need to insert divs into certain parts of the HTML string. So i can programmatically append, prepend, remove etc. parts of the shown content in the wysiwyg. But i can't get the manipulation to work. </p>
  
  <p>Should be simple to insert things into the dom right? But nothing gets appended in this example:</p>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>var app = angular.module("app", []);
  
  app.controller("ctrl", function($scope) {
  
    $scope.obj = {};
  
    // html string
    $scope.obj.htmlString = ' &lt;div class="wrapper-div"&gt;wrapper div&lt;div class="container"&gt;container div&lt;div class="inner-div"&gt;inner div&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
    // element inserted into html string ( virtual dom )
    $($scope.obj.htmlString).find('.container').prepend('&lt;b&gt;text inserted into container div&lt;/b&gt;');
  
    // insert the elements to dom
    angular.element('.insert-here').prepend($scope.obj.htmlString);
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="app" ng-controller="ctrl"&gt;
    {{ obj.htmlString }}
    &lt;div class="insert-here"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>PLUNKER:</p>
  
  <p><a href="https://plnkr.co/edit/dCzQF6YYth5NFOTkVahy?p=preview" rel="nofollow">https://plnkr.co/edit/dCzQF6YYth5NFOTkVahy?p=preview</a></p>