GWo*_*ing 4 html javascript xml dom domparser
代码
var txt = '<div id="hi">fe</div><div id="h2">fe</div><div id="hj">fe</div>'
var parser = new DOMParser();
var temp_node = parser.parseFromString(txt, "text/html").documentElement;
console.log(temp_node)
Run Code Online (Sandbox Code Playgroud)
这段代码产生了完整的html文档,其中包括
<html><head></head><body>
<div id="hi">fe</div>
<div id="h2">fe</div>
<div id="hj">fe</div>
</body></html>
Run Code Online (Sandbox Code Playgroud)
如果我只想要这个<div id="hi">fe</div><div id="h2">fe</div><div id="hj">fe</div>部分怎么办?我该怎么做?
并且,如果我想要附加所有节点,有没有办法在没有循环的情况下执行它?
parentNode.appendChile(temp_node) // add the entire code
parentNode.appendChile(temp_node.firstElementChild.nextElementSibling) // add the parent <body> and the other layers inside
parentNode.appendChild(temp_node.firstElementChild.nextElementSibling.childNodes) // doesn't do the trick, it complains about not being a "node", I guess I'd need an "appendChilds" function that allows to add many nodes at once
Run Code Online (Sandbox Code Playgroud)
*如果是parentNode,我希望如何 <div id="parent">
<div id="parent">
<div id="hi">fe</div>
<div id="h2">fe</div>
<div id="hj">fe</div>
</div>
Run Code Online (Sandbox Code Playgroud)
但我明白了
<div id="parent">
<body>
<div id="hi">fe</div>
<div id="h2">fe</div>
<div id="hj">fe</div>
</body>
</div>
Run Code Online (Sandbox Code Playgroud)
使用 childNodes
console.log(temp_node.childNodes[1].childNodes[0]);
Run Code Online (Sandbox Code Playgroud)
要么 querySelector
console.log(temp_node.querySelector("#hi"));
Run Code Online (Sandbox Code Playgroud)
更新
要么 innerHTML
console.log(temp_node.querySelector("body").innerHTML);
Run Code Online (Sandbox Code Playgroud)