How do I create an element from html formatted text?

Question

I'm using Angular 1.29 and Chrome.

I have some text like

<p>Text <strong> bold </strong> </p>

And I need to turn it into an element, because the library that I'm using, html2canvas, needs to be sent one.

So I've tried this, which I took from this answer

var div = document.createElement('div');
div.innerHTML = $scope.presData.text;
var element = div.firstChild;
    html2canvas(element,{
        onrendered:function(newCanvas){
            document.getElementById("newPresentation").appendChild(newCanvas);
        }
    });

Where my text is in $scope.presData.text, But that didn't work. This creates a canvas with a width and height of 0.

score 4 · Accepted Answer · answered Dec 15 '14 at 20:59

4

Using innerHTML of an HTML element should format them as document nodes.

var HTMLString = '<p>Text <strong> bold </strong> </p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;

If you're having some issues with your canvas, I think your issue lies elsewhere.

answered Dec 15 '14 at 20:59

Aweary

2,302
17
26

wouldn't this output the original string wrapped in a div rather than the original string simply as an element? – JRulle Dec 15 '14 at 21:04
@Jrulle Calling HTMLStringrontainer will return a div with valid
and HTML elements nested within. You can then query the children of the container to get the element directly. OP's code should be working, at least the element creation portion.
– Aweary Dec 15 '14 at 21:05
Using the updated version, this also creates a canvas with a width and height of 0. Maybe my issue is elsewhere, as you say. – Dec 15 '14 at 21:07
Yeah, try querying the element with a console.log() call before calling the html2canvas function. It should confirm that you have a valid HTML element. – Aweary Dec 15 '14 at 21:08
@Aweary Is the element I want to send it `HTMLStringContainer`, or `HTMLStringContainer.innerHTML`? – Dec 15 '14 at 21:10
After setting `innerHTML` you'd just call HTMLStringContainer in this example. That would give you the `

` element stack. If you wanted just the `
` and `` elements, you'd call `HTMLStringContainer.firstChild`
– Aweary Dec 15 '14 at 21:11
console.logging `HTMLStringContainer` gives me the element stack. – Dec 15 '14 at 21:12

score 1 · Answer 2 · answered Dec 15 '14 at 21:14

Try this to set up your strings as html nodes... it is robust and will handle alot of different situation (multiple sibling nodes at the highest level for example). jsfiddle Demo

// HTML string
var s = '<p>Text <strong> bold </strong> </p>';

var div = document.createElement('div');
div.innerHTML = s;
var elements = div.childNodes;

//using your above canvas code
var element = elements[0];
html2canvas(element,{
    onrendered:function(newCanvas){
        document.getElementById("newPresentation").appendChild(newCanvas);
    }
});

//multiple elements
//for(var i=0; i < elements.length; i++){
    //html2canvas(elements[i],{
          //onrendered:function(newCanvas){
                //document.getElementById("newPresentation").appendChild(newCanvas);
          //}
      //});
//}

This also creates a canvas with a width and height of 0. – Dec 15 '14 at 21:21 — , Dec 15 '14 at 21:21

How do I create an element from html formatted text?

2 Answers2