AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
      <div id="abc"></div>
      <input type="text" ng-model="txt"></input>
      <button ng-click="addBefore()">Add Before</button>
</div>
</div>

CSS

#abc {
    height: 50px;
    width: 400px;
    border: 1px solid;
}

JavaScript

function TodoCtrl($scope) {
  $scope.txt = "";
    $scope.addBefore = function() {
        
        $("#abc").before("<div><input type='text' value='" + quoteattr($scope.txt) + "'/></div>");
    };
}

function quoteattr(s, preserveCR) {
    preserveCR = preserveCR ? '&#13;' : '\n';
    return ('' + s) /* Forces the conversion to string. */
        .replace(/&/g, '&amp;') /* This MUST be the 1st replacement. */
        .replace(/'/g, '&apos;') /* The 4 other predefined entities, required. */
        .replace(/"/g, '&quot;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        /*
        You may add other replacements here for HTML only 
        (but it's not necessary).
        Or for XML, only if the named entities are defined in its DTD.
        */ 
        .replace(/\r\n/g, preserveCR) /* Must be before the next replacement. */
        .replace(/[\r\n]/g, preserveCR);
        ;
}