Creating DOM element from XML string, how to use .getElementsByName()?

Question

So I'm trying to insert a DOM element created from an XML string into my document. But first, I am trying to modify the innerText of some of the elements in that string. I'm trying to use the following...

refElem = document.createElement('div');
refElem.innerHTML = xmlString;
...
newChild = document.createElement('div');
newChild.innerHTML = refElem.innerHTML;
newChild.getElementsByName('title') ...

But I'm getting the following error:

main.js:140 Uncaught TypeError: newChild.getElementsByName is not a function

Anyone know how I can parse an xml string into a DOM element and manipulate that element before inserting it into my page?

NO jquery answers please! Vanilla JS only!

Answer 1

getElementsByName and getElementByID are functions of DOM document object, not DOM element object. To Search on a DOM element object, use querySelector or `querySelectorAll.

For example:

newChild.querySelectorAll('#title');