How do I select a node within a template string in html?

Question

Create an element and pass it an innerHTML string.

let mydiv = document.createElement('div');
mydiv.innerHTML = "<div> <p>Intro</p> </div> <div id='greet'> <p>Hello Example</p> </div>";
console.log(mydiv.getElementByID("greet"))

.. How do I get the element with id='greet'?

mydiv.getElementbyID('greet')   //doesn't work.

Answer 1

Assuming u have jquery

$(mydiv).find("#greet");

Answer 2

With your code, you can use Element.querySelector instead

You do have a few issues

1. misspelling getElementByID - should be getElementById
2. you cannot use Element.getElementById - you can use document.getElementById after inserting the new div into the DOM

querySelector

let mydiv = document.createElement('div');
mydiv.innerHTML = "<div> <p>Intro</p> </div> <div id='greet'> <p>Hello Example</p> </div>";
console.log(mydiv.querySelector("#greet"))

Or jQuery:

let $myDiv =$('<div/>');
$myDiv.html("<div> <p>Intro</p> </div> <div id='greet'> <p>Hello Example</p> </div>");
console.log($myDiv.find("#greet"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 3

mydiv.querySelector('#greet')

This is one very subtle difference between these selectors. With query selector, we can query string templates. Inspired from here.

Answer 4

Try the following way,

for (var child = mydiv.firstChild; child; child = child.nextSibling) {
   if(child.id == "greet") {
      console.log(child);
   }
}

Answer 5

getElementById is on document and not on a node. So you can always use queryselector like this.

let mydiv = document.createElement('div');
mydiv.innerHTML = "<div> <p>Intro</p> </div> <div id='greet'> <p>Hello Example</p> </div>";
console.log(mydiv.querySelector("#greet"));