Menu
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.
941
Using .text() as both a 'getter' and a 'setter' we can just repeat the pattern of:
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>
IMHO , You can do this in jquery in two steps :
Step 1) Parse the string into an XML/HTML document.
There are at least two ways to do this:
a) As mentioned by Sinetheta
var htmlString = "<html><div></div></html>";
var $htmlDoc = $( htmlString );
b) Using parseXML
var htmlString = "<html><div></div></html>";
var htmlDoc = $.parseXML( htmlString );
var $htmlDoc = $( htmlDoc );
Please refer http://api.jquery.com/jQuery.parseXML/
Step 2) Select text from the XML/HTML document.
var text = $htmlDoc.text( jquery_selector );
Please refer http://api.jquery.com/text/
42
Well,
First of all you should clarify how you are getting the source html from your own html. If you are using Ajax you should tick the source as html, even xml.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
