Extract HTML content from string in JQuery

Question

I have a textarea, inside this textarea, dynamic HTML content are bind like

<div id="HDWebAllTemplateHTMLListMessage">
    <div id="header">This is a header</div>
    <div class="main">
      <div id="content">This is my main content.</div>
      <div id="sidebar">This is a sidebar</div>
    </div>
    <div id="footer">This is my footer</div>
</div>

Somehow i want html content inside .main class. I tried but not able to get html content.

var textAreaContent=$($('#HDWebAllTemplateHTMLListMessage').text());
var divContent=textAreaContent.find('.main');
console.log(divContent.innerHTML);

#HDWebAllTemplateHTMLListMessage is nowhere in the code you posted, nor is .23TC, and what is htmlContent? — CertainPerformance
– CertainPerformance, Commented Aug 13, 2018 at 7:59
jQuery's find() function returns a jQuery object, and it doesn't have a property named innerHTML, use html() instead. Also, jQuery's text() function doesn't returns the HTML tags - again, use html() instead. See jQuery Docs. — Chayim Friedman
– Chayim Friedman, Commented Aug 13, 2018 at 8:04

synz · Accepted Answer · 2018-08-13 09:27:08Z

1

Do you really need to use textarea?

You can try like below. But if you don't need it. The azizsagi example is working fine.

JAVASCRIPT

var newdiv1 = $("<div class='dummy'></div>");
$("textarea").after(newdiv1); /* create dummy div */
var tgt = newdiv1;
var main = tgt.html($("textarea").text()).find(".main").text();
tgt.text(main);
/* newdiv1.remove(); */ // If you want to remove the element after you get what you need

JSFiddle : https://jsfiddle.net/synz/amgtLwex/

edited Aug 13, 2018 at 9:27

answered Aug 13, 2018 at 8:33

synz

5933 silver badges8 bronze badges

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

Comments

Programmer · Accepted Answer · 2018-08-13 08:06:59Z

0

text() gives you the text content, not the html, so it won't work to wrap it in $(). Use html().

$('#HDWebAllTemplateHTMLListMessage .main').html()

answered Aug 13, 2018 at 8:06

Programmer

2,1231 gold badge13 silver badges21 bronze badges

Comments

azizsagi · Accepted Answer · 2018-08-13 08:10:34Z

You can get the result by changing your js script to follows

<script>
var textAreaContent=$('#HDWebAllTemplateHTMLListMessage > .main').html();
console.log(textAreaContent);
</script>

here is running example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<div id="HDWebAllTemplateHTMLListMessage">
    <div id="header">This is a header</div>
    <div class="main">
      <div id="content">This is my main content.</div>
      <div id="sidebar">This is a sidebar</div>
    </div>
    <div id="footer">This is my footer</div>
</div>
<script>
var textAreaContent=$('#HDWebAllTemplateHTMLListMessage > .main').html();
console.log(textAreaContent);
</script>
</body>
</html>

Collectives™ on Stack Overflow

Extract HTML content from string in JQuery

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related