Create an html element from string with js

Question

I am trying to create an html elemnt from string in js.

The string is: "<p class='text-muted'> come and see how good I look </p>".

In the past I did this with php by echo it out and now I build the client side only with angularJS and I have no clue how to do it.

I tried to bind the string to the page but, as expected, it prints the whole string without encode the string to html elemnt..

I tried to look for an answer in the internet and specificly in this community without succuess..

Does it possible, and if so, How?

Thanks in advance

Do you want it in JavaScript or Angular? Show some context on how you are using it since there are multiple ways to do it. — epascarello
– epascarello, Commented Aug 11, 2017 at 16:59

Tim Andrews · Accepted Answer · 2017-08-11 17:18:19Z

1

You can use the ng-bind-html directive to bind a string of html to an element. The string should be sanitised first for example by injecting $sceand calling $sce.trustAsHtml() on the string to bind.

Example controller:

app.controller('MainCtrl', function($scope, $sce) {
  $scope.template = $sce.trustAsHtml('<p class="text-muted"> come and see how good I look </p>');
});

And in html

<div ng-bind-html="template"></div>

Here's a quick example plunker You can type in html and click to bind it

answered Aug 11, 2017 at 17:18

Tim Andrews

8471 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Santiago Nicolas Roca · Accepted Answer · 2017-08-11 17:03:26Z

0

You can attach a String definition of html to any DOM Elment using the property 'innerHTML'.

yourDomEl.innerHTML = '<div class="your-class"><a>Link</a></div>';

answered Aug 11, 2017 at 17:03

Santiago Nicolas Roca

3993 silver badges9 bronze badges

Collectives™ on Stack Overflow

Create an html element from string with js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related