Question

代码示例：

var new_node = document.createElement('div');
new_node.id = 'parent_1';

var html = '<div id="select_1">hey</div>'+
'<div id="select_2">hey</div>';

new_node.innerHTML = html;

使用DOMParser的代码示例

var parser = new DOMParser();
new_node.appendChild(parser.parseFromString(html, "text/html").documentElement);

以任何方式，我都无法通过

访问该元素

console.log(document.getElementById('select_1')); //null
// but I can with the DOM-like node (appended to the document)
console.log(document.getElementById('parent_1')); //correct

我有哪些选择？我不想以类似DOM的方式编写select_x节点，因为以这种方式编写的html代码将失去所有理解能力恕我直言

* parent_1节点被附加到真实的HTML节点上，例如 document.getElementById('html_element').parentElement.appendChild(parent_1);

编辑：解决了通过使用querySelector，例如

var parser = new DOMParser();
var temp = parser.parseFromString(html, "text/html").documentElement;
console.log(temp.querySelector('#select_1')); //correct
new_node.appendChild(temp);

Answer 1

解决方法使用querySelector（参见编辑过的问题），例如

var parser = new DOMParser();
var temp = parser.parseFromString(html, "text/html").documentElement;
console.log(temp.querySelector('#select_1')); //correct
new_node.appendChild(temp);

将HTML解析为DOM，稍后由getElementById访问

1 个答案: