是否有一种方法可以像这样转换HTML:
<div>
<a href="#"></a>
<span></span>
</div>
或任何其他HTML字符串到DOM元素?(这样我就可以使用appendChild())。我知道我可以做. innerhtml和. innertext,但这不是我想要的——我实际上希望能够将动态HTML字符串转换为DOM元素,以便我可以在. appendchild()中传递它。
更新:似乎有些混乱。我有一个字符串的HTML内容,作为JavaScript变量的值。文档中没有HTML内容。
你通常创建一个临时的父元素,你可以写innerHTML,然后提取内容:
var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;
如果您所获得的外部html元素是一个简单的<div>,就像这里一样,这很容易。如果它可能是其他任何地方都不能去的东西,你可能会有更多的问题。例如,如果它是<li>,你必须让父包装器是<ul>。
但是IE不能在<tr>这样的元素上写innerHTML,所以如果你有一个<td>,你必须把整个HTML字符串包装在<table><tbody><tr>…</tr></tbody></table>,将其写入innerHTML并从几个级别下提取实际的<td>。
这里有一些有用的代码。
var uiHelper = function () {
var htmls = {};
var getHTML = function (url) {
/// <summary>Returns HTML in a string format</summary>
/// <param name="url" type="string">The url to the file with the HTML</param>
if (!htmls[url])
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, false);
xmlhttp.send();
htmls[url] = xmlhttp.responseText;
};
return htmls[url];
};
return {
getHTML: getHTML
};
}();
——将HTML字符串转换为DOM元素
String.prototype.toDomElement = function () {
var wrapper = document.createElement('div');
wrapper.innerHTML = this;
var df= document.createDocumentFragment();
return df.addChilds(wrapper.children);
};
——原型辅助
HTMLElement.prototype.addChilds = function (newChilds) {
/// <summary>Add an array of child elements</summary>
/// <param name="newChilds" type="Array">Array of HTMLElements to add to this HTMLElement</param>
/// <returns type="this" />
for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
return this;
};
——使用
thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();