Javascript get element from text

Question

I have text that contain HTML elements. For example like this

<div>
    <div>content</div>
    <div>
         <div id="myId">
            <p>
                <span>content</span>
                <span>content</span>
            </p>
        </div>
    </id>   
</div>

I want to get innerHTML of some element from this text using javascript like this example

// HTML variable contain above HTML text
var innerHTML = HTML.getElementById('myId').innerHTML;

Is it possible? Or other way like this way?

http://www.sitemaps.org/protocol.html - on the last chapter, there's a schema to validate your sitemap — michi, Feb 07 '16 at 00:40
Possible duplicate of [Creating a new DOM element from an HTML string using built-in DOM methods or prototype](http://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro) — isherwood, May 05 '16 at 18:57
Please tell us more about what you're doing - are you doing this in a browser, or with node.js? — Jeff McMahan, May 05 '16 at 18:59
What do you want to do? If you want to get the contents of one of those spans, just give it an ID, and then you just do `document.getElementById('itsNewID').innerHTML` — Toastrackenigma, May 05 '16 at 19:31
Why not include that information in your question? It's unclear to state one thing, but expect another. — evolutionxbox, May 05 '16 at 19:37
To clarify, you mean "get `innerHTML` from an element in an HTML string stored in a variable", correct? The HTML above is in a variable called `HTML` if I'm understanding this correctly. — Joseph Marikle, May 05 '16 at 19:52

score 2 · Accepted Answer · answered May 05 '16 at 19:47

You could use a document fragment.

var HTML = "<div>\
    <div>content</div>\
    <div>\
         <div id=\"myId\">\
            <p>\
                <span>content</span>\
                <span>content</span>\
            </p>\
        </div>\
    </div>\
</div>";

// create a fake document
var df = document.createDocumentFragment();

// create a placeholder node to hold the innerHTML
var el = document.createElement('body');
el.innerHTML = HTML;

// append to the document fragment
df.appendChild(el);

// execute .getElementById
console.log(df.getElementById('myId').innerHTML);

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

Create a new element based on your string as described in this question: Creating a new DOM element from an HTML string using built-in DOM methods or prototype.

After that you can operate on your new sub-tree with whatever DOM methods you want. You don't need to actually attach it to the page unless you want to use methods that would depend on actual rendering.

var HTML =
'<div>\
    <div>content</div>\
    <div>\
         <div id="myId">\
            <p>\
                <span>content</span>\
                <span>content</span>\
            </p>\
        </div>\
    </id>\
</div>';

var elements = document.createElement('div');
elements.innerHTML = HTML;
var targetElement = elements.querySelectorAll("#myId");

console.log(targetElement)

edited May 23 '17 at 12:33

Community

1
1

answered May 05 '16 at 19:45

Oleg V. Volkov

21,719
4
44
68

I create example for your solution but it has problem. See https://jsfiddle.net/0uh9c8kp/ – Mohammad May 05 '16 at 19:53
This is the right idea. The only problem is that you can't necessarily "operate... with whatever DOM methods you want". nodes don't have the method `getElementById`. That is a [method of `document` objects](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById). – Joseph Marikle May 05 '16 at 19:57
@JosephMarikle, well of course you're still bound by usual rules and can only call `Element` methods on element. In this particualr fiddle `var targetElement = elements.querySelectorAll("#myId");` will work. – Oleg V. Volkov May 05 '16 at 20:02
How can i get `innerHTML` from `targetElement`? – Mohammad May 05 '16 at 20:17

Javascript get element from text

2 Answers2