innerHTML from Javascript String

Question

I have a JavaScript string with HTML content inside it.

e.g.

var HTMLtext = 'text <div id="test-div-1">this is <b>just</b> a div</div><div id="test-div-2">this is <b>just</b> another div</div> more filler text';

I am looking to get the innerHTML from the first div element within this string. When I try using:

var testDiv1 = HTMLtext.getElementByID("test-div-1");

I get the error

HTMLtext.getElementByID is not a function at window.onload

Are there any workarounds without putting HTMLtext in a temporary container?

JSFiddle

Your HTMLtext variable is a string not html element. What you are trying to do is same as if you would try 'this is some text.getElementById('id')`. If you want to get the div with id you would have to do som regex string search.. What exactly are you trying to acomplish? — Viliam Aboši
– Viliam Aboši, Commented Apr 10, 2017 at 16:24
Never use regex for parsing html. Search on SO to see numerous discussions on the subject. Just parse it using either jquery or another parsing library. — fdomn-m
– fdomn-m, Commented Apr 10, 2017 at 16:28
I'm using AJAX to get the responsetText for a query and I want to split up the data being returned. I understand it's a string but I figured there would be some way to convert it temporarily. I'm fine using jQuery. — Tim Troiano
– Tim Troiano, Commented Apr 10, 2017 at 16:29

Reinstate Monica Cellio · Accepted Answer · 2017-04-10 16:35:19Z

4

Since you have jQuery in the question tags this is very simple...

var testDiv1 = $("<div/>", { html: HTMLtext }).find("#test-div-1").html();

That creates a non-DOM element, sets the html value and then parses and gets the inner html of the div you want.

Here's an updated version of your jsfiddle...

edited Apr 10, 2017 at 16:35

answered Apr 10, 2017 at 16:22

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tim Troiano Over a year ago

This is exactly what I'm looking for. For some reason it won't work when I try it in JSFiddle? jsfiddle.net/fwueufef

Reinstate Monica Cellio Over a year ago

Okay, my bad. You can't use $() unless you're creating an element. I've modified it to create an empty div, add your HTMLtext and then parse for the div in question.

Tim Troiano Over a year ago

Thank you. There's a couple great answers here but yours seems to solve my problem the simplest way.

Reinstate Monica Cellio Over a year ago

No problem - happy to help :)

Mayank Over a year ago

If you dont get any specific div id you can use this var testDiv1 = $("<div/>", { html: HTMLtext}).find("div").html(); BTW Good Solution @Archer

Waquar Azam · Accepted Answer · 2017-04-10 16:37:39Z

1

var HTMLtext = 'text <div id="test-div-1">this is <b>just</b> a div</div><div id="test-div-2">this is <b>just</b> another div</div> more filler text';
var tempDom = $('<output>').append($.parseHTML(HTMLtext));
$("#test-div-1",tempDom);

Parse the string to create HTML and create a temporary DOM so that jquery can traverse it.

answered Apr 10, 2017 at 16:37

Waquar Azam

214 bronze badges

Comments

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-04-10 17:34:28Z

As was mentioned in the comments, there is no string (prototype) function getElementByID. You are likely thinking of document.getElementById(). To use that, you would have to create an element with document.createElement(), set the innerHTML to the html string, add the element to the DOM (perhaps hidden so it isn't visible) with document.body.appendChild(), then use document.getElementById() (note that the D is lowercase). But that would be creating a temporary container.

jQuery does simplify this a bit. It still requires creating a container but it doesn't have to be appended to the DOM. After creating an element with jQuery() and setting the html with .html(), use jQuery.find() to find the element with the id selector. Then use .html() to get the html contents of the first element found.

var HTMLtext = 'text <div id="test-div-1">this is <b>just</b> a div</div><div id="test-div-2">this is <b>just</b> another div</div> more filler text';
var testDiv1 = $('<div>').html(HTMLtext).find('#test-div-1');
console.log(testDiv1.html());

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

Collectives™ on Stack Overflow

innerHTML from Javascript String

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related