Find DOM element in text content using javascript

Question

Please push me towards a duplicate of this question if possible. I've looked everywhere but can't seem to find it.

How do I do a getElementById on text content?

var test = '<div id="thisDiv">HI</div>';

How do I select thisDiv if it's not a part of the DOM?

What's the easiest way to get the value then of thisDiv if it's a string? — KingKongFrog, Dec 30 '13 at 20:56
Check this answer: http://stackoverflow.com/a/3104237/2563028 — EfrainReyes, Dec 30 '13 at 21:00

score 4 · Accepted Answer · answered Dec 30 '13 at 21:01

Create an element, set your string as its innerHTML and then search inside that ...

Something like

var test = '<div id="thisDiv">HI</div>';
var element = document.createElement('DIV');
element.innerHTML = test;

alert(element.textContent);

(changed the initial outerHTML as you can only maintain a reference to the originaly created element, and not the new one that is created by the new html)

score 0 · Answer 2 · answered Dec 30 '13 at 21:00

0

For getting the text value inside your tags, use RegEx:

var re = new RegExp("<(.|\n)*?>", "g");
var content = test.replace(re,"");

answered Dec 30 '13 at 21:00

bbuecherl

1,609
12
20

score 0 · Answer 3 · answered Dec 30 '13 at 21:01

You could create a temporary DIV and populate it with your string. Even then, your ability to access it would be limited. Add it to the DOM to access it using getElementById.

var div = document.createElement('div');
div.innerHTML = '<div id="thisDiv">HI</div>';
alert(div.firstChild);

score 0 · Answer 4 · answered Dec 30 '13 at 21:08

To avoid creating that extra element, we could just add it to the body...

var test = '<div id="thisDiv">HI</div>';
document.querySelector('body').innerHTML = test;
console.log(document.getElementById('thisDiv'));

Obligatory Fiddle

Getting just the text...

console.log(document.getElementById('thisDiv').textContent); // returns HI

Find DOM element in text content using javascript

4 Answers4