如何从html格式的文本创建元素？

Question

我正在使用Angular 1.29和Chrome。

我有一些像

这样的文字

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

我需要将其转换为element，因为我正在使用的库html2canvas需要发送一个。

所以我尝试了这个，我从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);
        }
    });

我的文字位于$scope.presData.text， 但那没用。这将创建宽度和高度为0的画布。

Answer 1

使用HTML元素的innerHTML应将它们格式化为文档节点。

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

如果您的画布出现问题，我认为您的问题出在其他地方。

Answer 2

尝试将你的字符串设置为html节点......它很健壮并且可以处理很多不同的情况（例如最高级别的多个兄弟节点）。的 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);
          //}
      //});
//}