I have the following HTML
<div id="example">
...some text...
<script type="text/javascript">
... some javascript...
</script>
</div>
How to get content of #example but also with the JavaScript?
$("#example").html(),
$("#example").text(),
$("#example").val()
all don't work.
I have the following HTML
<div id="example">
...some text...
<script type="text/javascript">
... some javascript...
</script>
</div>
How to get content of #example but also with the JavaScript?
$("#example").html(),
$("#example").text(),
$("#example").val()
all don't work.
Share Improve this question edited Jan 30, 2011 at 3:56 Yi Jiang 50.1k16 gold badges138 silver badges136 bronze badges asked Sep 16, 2009 at 9:20 mm.mm. 7977 gold badges15 silver badges21 bronze badges 2- 4 your javascript does not belong there – Natrium Commented Sep 16, 2009 at 9:25
- 1 $.html() should have worked. i wonder why. – mauris Commented Sep 16, 2009 at 9:29
9 Answers
Reset to default 11The html() method should work for you. Are you sure you are running the code after the DOM is completed?
$(document).ready(function(){
alert($("#example").html());
});
Working Demo
You can use
html(): Get the html contents (innerHTML) of the first matched element.
var contents = $("#example").html();
Just use:
$("#example").get().innerHTML;
That gets the DOM object from the jQuery object and spits out the raw content.
var txt = document.getElementById("example").innerHTML;
This will fetch you the innertext of div. Write this line at end of your body tag. Or call it in a method which will be called after body onLoad
Just tried it and $('#example').html() does work in isolation:
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' lang='text/javascript' />
</head>
<body>
<div id="example">
...some text...
<script type="text/javascript">
... some javascript...
</script>
</div>
<script>
alert($('#example').html());
</script>
</body>
</html>
<!--This code will work -->
<html>
<head>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" lang='text/javascript' />-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//alert($('#example p').html());
alert($('#example').text());
alert($('#example #1').text());
alert($('#example #2').text());
alert($('#example #3').text());
alert($('#example #4').text());
//alert($("#example p").get().innerHTML);
//alert('hey');
});
</script>
</head>
<body>
<div id="example">
<p>...some text...</p>
<div id="1">
Here's 1
</div>
<div id="2">
Here's 2
</div>
<div id="3">
Here's 3
</div>
<div id="4">
Here's 4
</div>
</div>
</body>
</html>
menuItem.firstChild.innerHTML
Perhaps this helps.
This works for me: $("#example").contents()
In my case I am getting an html snippet back from a web service (as a property in an object returned as JSON). I want to display it without formatting, and also without javascript blocks. The .html() does return the javascript blocks for me, so that doesn't work.
What I ended up with was:
// Build up the message a bit artificially for this demo.
// is actually response from ajax call
var message = '<scri';
message += 'pt type="text/javascript">var foo = "bar";</scr'
message += 'ipt><h2>A heading</h2><div>This is a message</div>';
var message_html = jQuery('<div/>') // create a container
.html(message) // set the contents from the message
.find('script') // find script blocks
.remove() // and remove them
.end(); // back to the original collection but without script blocks
// Now get just the text from there
alert(message_html.text());
Working fiddle