How to get the `` tag HTML with JavaScript / jQuery?

javascript

prompt-engineering

performance

callbacks

byAlex Kataev·Oct 8, 2024

Here's the punchline:

To get the entire <html> markup: JavaScript: document.documentElement.outerHTML; jQuery: $('html')[0].outerHTML;

console.log(document.documentElement.outerHTML); // Pure JS for the win!
console.log($('html')[0].outerHTML); // jQuery in the house!

Detailed walkthrough: Retrieval and manipulation methods

For those who value not just the "how", but the "why" as well, let's dive deep into the ocean of HTML tag manipulation.

Retaining the doctype

A doctype can be as aloof as a cat, but JavaScript's got a tool to tame it:

const doctype = new XMLSerializer().serializeToString(document.doctype); 
console.log(doctype); // "<!DOCTYPE html>" or your doctype's last words.

Digging for HTML tag attributes

To get an attribute from the <html> tag, you've got options:

JavaScript:

// Element.getAttribute(): Old but gold
const langAttr = document.documentElement.getAttribute('lang');
console.log(langAttr); // Prints 'en' or your webpage's language

jQuery:

// jQuery's attr(): The 'new' Old but gold
const langAttrJQuery = $('html').attr('lang');
console.log(langAttrJQuery); // Same as before, but with jQuery style

Futzing with `<html>` attributes – handle with care!

Changing the attributes? Easy peasy. But remember: With great power comes great responsibility:

JavaScript:

// JavaScript doesn't mind if it's Spanish
document.documentElement.setAttribute('lang', 'es');

jQuery:

// Indeed, let's make the html tag speak some Spanish too
$('html').attr('lang', 'es');

Extras: Alternative methods and insider tricks

Like a Swiss army knife, JavaScript has a tool for every job. Let's explore more of them:

Wizarding ways to access HTML

JavaScript has many spells to summon the html DOM element:

// Summon the html tag. It's like calling a Genie out of the magic lamp
document.getElementsByTagName("html")[0]; 
document.querySelector("html"); 
document.body.parentNode; // Or you can ask the body's parent. It always knows!

The need for speed: jQuery vs JavaScript

Pure JS is a hare and jQuery is the tortoise when it comes to performance. Tortoise wins the story, but not in coding:

// Vanilla JS gets ready, set, go! faster than jQuery
let htmlElement = document.documentElement;
// jQuery is slow but steady. It gets there, eventually
let htmlElementJQuery = $('html')[0];

Supercharging with plugins

Enhance your jQuery experience with plugins! Ever heard about getAttributes? It fetches all attributes of an element:

$('#element').getAttributes(); // Like asking a Genie to list out its powers

explain-codes / Javascript / How to get the `` tag HTML with JavaScript / jQuery?

Linked

Converting HTML string into DOM elements?



Strip HTML tags from text using plain JavaScript



Parse an HTML string with JS



How to get the pure text without HTML element using JavaScript?



How do I get the information from a meta tag with JavaScript?



Getting HTML elements by their attribute names



How to escape double quotes in a title attribute



Detailed walkthrough: Retrieval and manipulation methods Extras: Alternative methods and insider tricks