JavaScript: document.documentElement.innerHTML not showing all the elements

Related searches

I'm trying to figure out how to get all the elements of html. For example, if I load this google search, I'll see this result:

Looking at the source code for that particular section of the page, I saw this:

<a href="https://www.macworld.com/article/3331839/iphone-2019-rumors-everything-you-need-to-know.html" onmousedown="return rwt(this,'','','','38','AOvVaw07dY5FgPEzcYsd8enm-9gs','','2ahUKEwicoNi4yPjhAhVdCTQIHVxICj4QFjAlegQIABAB','','',event)">
<h3 class="LC20lb">iPhone 2019 rumors: Everything you need to know | Macworld</h3><br><div class="TbwUpd">
<cite class="iUh30">https://www.macworld.com/.../iphone-2019-rumors-everything-you-need-to-know.ht...</cite></div></a>

But if I use document.documentElement.innerHTML, I see this:

<div class="g"><h3 class="r">
<a href="/url?q=https://www.macworld.com/article/3331839/iphone-2019-rumors-everything-you-need-to-know.html&amp;sa=U&amp;ved=0ahUKEwiU__rUy_jhAhWIHzQIHTrGBzIQFghLMAo&amp;usg=AOvVaw2C3PdwxIaeNuukMVSwC-5g">
<b>iPhone 2019</b> rumors: Everything you need to know | Macworld</a>
</h3><div class="s"><div class="hJND5c" style="margin-bottom:2px">

My question: why is there a difference between the source code and the output from document.documentElement.innerHTML?

Also, it looks like this when using JavaScript:

<a href="https://www.macworld.com/article/3331839/iphone-2019-rumors-everything-you-need-to-know.html" onmousedown="return rwt(this,'','','','38','AOvVaw07dY5FgPEzcYsd8enm-9gs','','2ahUKEwicoNi4yPjhAhVdCTQIHVxICj4QFjAlegQIABAB','','',event)">
<h3 class="LC20lb">iPhone 2019 rumors: Everything you need to know | Macworld</h3><br><div class="TbwUpd">
<cite class="iUh30">https://www.macworld.com/.../iphone-2019-rumors-everything-you-need-to-know.ht...</cite></div></a>

I wasn't able to re-produce you problem, in my case source code showed exactly the same as document.documentElement.innerHTML. So, I don't really know why in this particular example you have this particular problem.

Even though, source-code of the page frequently may have nothing to do with document's innerHTML.

innerHTML have at least 2 inaccuracies:

  1. It shows result of JS execution that might modify DOM.

For example, here you have the source code of a sample React App.

<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>

And here's the output it produces:

In this case, the source is completely different from the innerHTML since we generate new things with js.

However, it'd also be different if we would modify existing markup with JS & It's probable that this is the case with Google's result page.

  1. innerHTML shows what browser have parsed, not the content that was sent from the server.

For example, if I sent a bad HTML from the server like this:

<head>...</head>
<!DOCTYPE html>
<html lang="en">
   <body>...</body>
</html>

Then document.documentElement.innerHTML will nicely output my bad markup like this:

<head>...</head>
<body>...</body>

This one probably doesn't affect Google's page but it also worth considering when you build something on the basis of document's innerHTML.

So, if what you really want is the source code of the page, probably, you just need to fetch it from the server directly & just get text out of the response.

In client-side JS you can do so with fetch API. The only problem is that you might not be able to do so from an origin different from google.com since you might run into CORS policy problem.

From the server-side, you certainly would have a tool to do a GET request. So, you might use something like http.get in NodeJs or file_get_contents() in PHP.

documentElement.innerHTML not showing the iframe body, Based on this post, here a solution: UPDATE function showIF() { var f= document. getElementById('myIframe'); var d= f.contentDocument? f.contentDocument : f. For any non-empty HTML document, documentElement will always be an <html> element. For any non-empty XML document, documentElement will always be whatever element is the root element of the document.

Google's HTML tags are way more complex than what you're looking for, but I assume you want something like this

x = document.querySelectorAll('.g')

x.forEach(function(element) {
    console.log(element.outerHTML);
});

Element.innerHTML, it in glitch. This is what I have so far but it is not… Inner HTML not working ( SOLVED) DOCTYPE html> <html> <head> <script> document.body. The body element you're trying to call will not exist during the execution of the script. And please do not have any irrelevant discussion in this thread! Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

To me, it looks like certain part of the page is dynamically generated through script at client end and that this script is stored at server side other than google. Therefore you might have to run through CORS policy problem. So, "document.documentElement.innerHTML" will only show the static elements of the page that was written initially to be shown at client side, leaving the script that generated the other elements dynamically.

Inner HTML not working (SOLVED) - Coding Help, Script not working function getprompt(){ … Problem writing elements to innerHTML createElement('div'); f1prompt.id='f1prompt'; var label=document. The 'f1prompt' is right on top of 'f1' with z-index but any objects written to 'f1' show through 'f1promt' if 'f1prompt' is written as div offsetWidth) { winW = document. body. Returns a collection of all <embed> elements the document: execCommand() Invokes the specified clipboard operation on the element currently having focus. forms: Returns a collection of all <form> elements in the document: fullscreenElement: Returns the current element that is displayed in fullscreen mode: fullscreenEnabled()

The returned HTML or XML fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup.

for more detail

Problem writing elements to innerHTML - JavaScript, Example 1: This example gets the whole document as string using document. documentElement.innerHTML. filter_none. edit close. play_arrow. The style display property is used to set as well as get the element's display type in JavaScript. Majority of the HTML elements have the inline or block display type. The content of an inline element floats to its left and right sides. Block HTML elements are different because they * fill* the entire line, and do not show content on their sides.

How to get the entire HTML document as a string in JavaScript , If the DOM you have is an HTML document, you can serialize using serializeToString(), but there is a simpler option: just use the Element.innerHTML property (if you want just the descendants of the specified node) or the Element.outerHTML property if you want the node and all its descendants. var docHTML = document.documentElement.innerHTML;

element.innerHTML = new html content: Change the inner HTML of an element: element.attribute = new value: Change the attribute value of an HTML element: element.style.property = new style: Change the style of an HTML element: Method Description; element.setAttribute(attribute, value) Change the attribute value of an HTML element

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Comments
  • It looks like google currently wraps the results HTML inside a div element using the class "g." document.querySelectorAll('.g') will return the node list of the search results. Loop through the list provided and get the innerHTML for each element. Is this what you are looking for?
  • @daddygames using document.querySelectorAll('.g') I get this error JavaScript execution returned a result of an unsupported type
  • This doesn't make sense to me. document.documentElement points to the <html> tag of the web page.
  • @customcommander, any idea how can get <h3 class="LC20lb">iPhone 2019 ?
  • What is the code you used that returned the error?
  • x is nil also I have this error "JavaScript execution returned a result of an unsupported type"