有没有办法转换 HTML,如:
<div>
<a href="#"></a>
<span></span>
</div>
或任何其他 HTML 字符串到 DOM 元素中? (这样我就可以使用 appendChild())。我知道我可以使用 .innerHTML 和 .innerText,但这不是我想要的——我确实希望能够将动态 HTML 字符串转换为 DOM 元素,以便可以在 .appendChild() 中传递它。
更新:似乎有混乱。我有一个字符串中的 HTML 内容,作为 JavaScript 中变量的值。文档中没有 HTML 内容。
您可以使用 DOMParser
,如下所示:
var xmlString = "
"; var doc = new DOMParser().parseFromString(xmlString, "text/xml"); console.log(doc.firstChild.innerHTML); // => 链接... console.log(doc.firstChild.firstChild.innerHTML); // => 链接
您通常会创建一个可以写入 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>
中,写 that< /em> 到 innerHTML
并将您想要的实际 <td>
从几个级别中解脱出来。
onclick="..."
的东西,虽然这对于没有在 HTML 中定义的事件处理程序当然不起作用,这可能是你的意思。
some string at the start <div><a href="#">anchor text</a><span>inner text</span></div>string end
怎么办?
为什么不使用 insertAdjacentHTML
例如:
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here
查看 John Resig 的 pure JavaScript HTML parser。
编辑:如果您希望浏览器为您解析 HTML,innerHTML
正是您想要的。从 this SO question:
var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;
htmlString
喜欢 <tr>...</tr>
则无法正常工作 :(
好吧,在我不得不考虑其他人的答案之后,我自己意识到了答案。 :P
var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);
这是一个有用的小代码。
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();
String
和 HTMLElement
原型(你通常真的不应该做的事情)之外,还添加了许多完全不必要的东西。这是无关紧要的危险...
toDomElement
返回 wrapper.firstChild
和返回 df.addChilds(wrapper.children)
有什么区别,除了后者返回一个节点数组。
只需给元素一个 id
并正常处理它,例如:
<div id="dv">
<a href="#"></a>
<span></span>
</div>
现在你可以这样做:
var div = document.getElementById('dv');
div.appendChild(......);
或者使用 jQuery:
$('#dv').get(0).appendChild(........);
你可以这样做:
String.prototype.toDOM=function(){
var d=document
,i
,a=d.createElement("div")
,b=d.createDocumentFragment();
a.innerHTML=this;
while(i=a.firstChild)b.appendChild(i);
return b;
};
var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);
text/html
进行 HTML 解析?