Home/ Questions/Q 7437509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:24:38+00:00

Maybe this is very basic, but I am all confused. I have a simple

  • 0

Maybe this is very basic, but I am all confused.
I have a simple html page with many sections (div). I have a string containing html tags in javascript. The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
</script>
</head>
<body>
<div id="title1"></div>
<div id="new1"></div>
<div id="title2"></div>
<div id="new2"></div>
</body>
</html>

I want to extract content of the html tags (from the string in javascript) and display that content in my html page in desired sections.

i.e. I want “This is a heading1” displayed in <div id="title1"> and “This is a paragraph1.” to be displayed in <div id="new1"> and same for the second pair of tags.

I need all of this to work only on the client side. I have tried to use HTML DOM getElementByTagName method and its getting too complicated. I know very little of jquery. And I am confused. I dont understand how to go about it. Can you guide me what to use – javascript or jquery and how to use it? Is there a way to identify the from the string and iterate through it?

How to extract “This is heading1” (and similar contents enclosed in the html tags) from str1?? I don’t know the index of these hence cannot use substr() or substring() function in javascript.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using .text() as both a ‘getter’ and a ‘setter’ we can just repeat the pattern of:

    • target the element on the page we wish to fill
    • give it content from
      the string

    jsFiddle

    <script type="text/javascript">
var str1="<html><body><div id='item1'><h2>This is a heading1</h2><p>This is a paragraph1.</p></div><div id='item2'><h2>This is a heading2</h2><p>This is another paragraph.</p></div><div id='lastdiv'>last</div></body></html>";
$(function(){
    var $str1 = $(str1);//this turns your string into real html 

    //target something, fill it with something from the string
    $('#title1').text( $str1.find('h2').eq(0).text() );
    $('#new1').text( $str1.find('p').eq(1).text() );
    $('#title2').text( $str1.find('h2').eq(1).text() );
    $('#new2').text( $str1.find('p').eq(1).text() );
})
</script>
    • 0