Parsing HTML into DOM to be later accessed by getElementById

Question

Example of code:

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;

example of code with DOMParser

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

in whatever way, I cannot access to the element through

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

What options do I have? I would not want to write the select_x nodes in a DOM-like style, since html code written in that way would lose all understand-ability IMHO

*The parent_1 node is appended onto a real HTML node such as document.getElementById('html_element').parentElement.appendChild(parent_1);

EDIT: solved By using querySelector, for example

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

Hi there! This would be a much better question if you could include your code :) — jonny, Aug 28 '15 at 14:00
why `if="` and not `id="` is that just a typo or the real issue here? — Mark Schultheiss, Aug 28 '15 at 14:21
Div select_1 is inside new_node. Your code doesn't show that you insert new_node into the document, so document.getElementByid can never work until you do. You have to use new_node.getElementById() if you want to get the select_1 before you append new_node to the document. — Shilly, Aug 28 '15 at 14:21
@Shilly - yep I was just going to comment the same thing - which along with the `getElementById('select_1')` is selecting a non-existent element even if it were appended to the document. — Mark Schultheiss, Aug 28 '15 at 14:22
It was a typo. The thing is that I can select by getElementById the DOM node (parent_1) after appending it to the document, but not the select_1 node — GWorking, Aug 28 '15 at 14:46
I have nonetheless tried the new_node.getElementById() but I get the message "TypeError: new_node.getElementById is not a function" — GWorking, Aug 28 '15 at 14:58
You should now paste that answer (how you resolved it) into an answer and accept that so that this question shows resolved. One optional method would be to use the accepted answer from this question http://stackoverflow.com/questions/814564/inserting-html-elements-with-javascript and then use `fragment.getElementById(childId)` NOTE: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser see the supported as it is recent. — Mark Schultheiss, Aug 29 '15 at 19:03

score 4 · Answer 1 · answered Aug 29 '15 at 19:19

4

Solved By using querySelector (see edited question), for example

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

answered Aug 29 '15 at 19:19

GWorking

4,011
10
49
90

Parsing HTML into DOM to be later accessed by getElementById

1 Answers1