javascript - Manipulate html string with Jquery ( in Angular application for wysiwyg editor ) -
i have wysiwyg editor uses $scope.variable source of html.
now need insert divs parts of html string. can programmatically append, prepend, remove etc. parts of shown content in wysiwyg. can't manipulation work.
should simple insert things dom right? nothing gets appended in example:
javascript:
var app = angular.module("app", []); app.controller("ctrl", function($scope) { $scope.obj = {}; // html string $scope.obj.htmlstring = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>'; // element inserted html string ( virtual dom ) $($scope.obj.htmlstring).find('.container').prepend('<b>text inserted container div</b>'); // insert elements dom angular.element('.insert-here').prepend($scope.obj.htmlstring); }); html:
<body ng-app="app" ng-controller="ctrl"> {{ obj.htmlstring }} <div class="insert-here"> </div> </body> plunker:
you need use .container selector , html out of dom
var htmlstring = ' <div class="wrapper-div">wrapper div<div class="container">container div<div class="inner-div">inner div</div></div></div>'; // element inserted html string ( virtual dom ) var $html = $('<div>' + htmlstring + '</div>').find('.container').prepend('<b>text inserted container div</b>'); htmlstring = $html.html(); alert(htmlstring);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Comments
Post a Comment