- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension
看起来 DOMParser 使用 innerHTML 将字符串化元素添加到 DOM。使用它有什么好处?
我在下面比较了使用 DOMParser().parseFromString() 和使用 element.innerHTML 之间的区别。我忽略了什么吗?
使用 DOMParser
const main = document.querySelector('main');
const newNodeString = '<body><h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p></body>';
// Works as expected
let newNode = new DOMParser().parseFromString(newNodeString, 'text/html');
let div = document.createElement('div');
console.log('%cArray.from: ', 'border-bottom: 1px solid yellow;font-weight:1000;');
Array.from(newNode.body.children).forEach((node, index, array) => {
div.appendChild(node);
console.log('length:', array.length, 'index: ', index, 'node: ', node);
})
main.appendChild(div);
const main = document.querySelector('main');
const newNodeString = '<h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p>';
// Works as expected
let div = document.createElement('div');
div.innerHTML = newNodeString;
main.appendChild(div);
最佳答案
好吧,一方面,DOMParser
可以parse XML files .它还验证 XML 格式是否正确,如果格式不正确,则会产生有意义的错误。更重要的是,它正在为正确的工作使用正确的工具。
我过去使用它来获取上传的 XML 文件并使用预定义的 XSLT 样式表生成 HTML,而无需涉及服务器。
显然,如果您所做的只是将字符串附加到现有的 DOM,并且 innerHTML
(或 outerHTML
)适合您,继续使用它。
关于javascript - DOMParser().parseFromString() 值得使用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56318353/
我正在生成代码,其中我恰好将 n 个单词从一个内存位置复制到另一个非重叠内存位置。 n 是静态已知的。 目前,我发出大量加载指令,然后是大量存储指令,但我怀疑从 n 的某个值开始,调用 memcpy会
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
用例如下: 我有一张 map ,其中将插入一些键/值。 该程序将查询该 map ,但是在第一个查询之后,我可以保证该 map 将完全不会被修改。 因为查询的结果完全是输入的函数,所以在查询方法上放置属
Helo 伙计们,我尝试使用 Refs 并在他的内部提供 this.setState 但它给出: Maximum update depth exceeded. This can happen when
在检查事件时,使用带有 switch 或 if 的代码块是很常见的事情。如果变得简单,它可以是干净的代码,但似乎仍然有比需要更多的行,并且可以使用 lambda 进行简化。 用 if 阻止: if(a
Amazon 最近宣布在其 RDS 产品线中支持 Oracle: http://aws.amazon.com/rds/oracle/ 我想知道是否有人使用过它,或者是否有令人信服的理由将我的数据从 M
我是一名优秀的程序员,十分优秀!