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

【问题标题】：How do I create an element from html formatted text?如何从 html 格式的文本创建元素？
【发布时间】：2015-02-14 01:49:05
【问题描述】：

我正在使用 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 的画布。

【问题讨论】：

标签： javascript html angularjs canvas

【解决方案1】：

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

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

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

【讨论】：

这不会输出包装在 div 中的原始字符串，而不是简单地作为元素输出原始字符串吗？
@Jrulle 调用 HTMLStringrontainer 将返回一个 div，其中嵌套了有效的
和 HTML 元素。然后，您可以查询容器的子项以直接获取元素。 OP 的代码应该可以工作，至少是元素创建部分。
使用更新的版本，这也会创建一个宽度和高度为 0 的画布。也许我的问题在其他地方，正如你所说。
是的，在调用 html2canvas 函数之前尝试使用 console.log() 调用来查询元素。它应该确认您有一个有效的 HTML 元素。
@Aweary 是我要发送的元素HTMLStringContainer，还是HTMLStringContainer.innerHTML？

【解决方案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);
          //}
      //});
//}

【讨论】：

这也会创建一个宽度和高度为 0 的画布。