DOM - Element content

Dom Web API - Get

With the WebAPI DOM, the Element.innerHTML property gets the HTML syntax describing the element's descendants.

• select the element

content = document.querySelector('body>p').innerHTML;
console.log(content);

• The HTML

<p>The content for the <span style="font-weight: bold;">Web API</span> 

Jquery Get

With Jquery

• Get the HTML content

content = $("body>p").html(); 
console.log(content);

<p>The content for the <span style="font-weight: bold;">Jquery</span> 

Dom Web API Replace

• With the WebAPI DOM, the Element.innerHTML property sets or gets the HTML syntax describing the element's descendants.

// Replaces body content with an HTML code
document.body.innerHTML = "<p>I will change the body content</p>";  
// The whole content is replaced with an assignement
document.body.innerHTML = "<p>I will change the body content too</p>";  

<p>I will be erased !</p>

Jquery Update

• With Jquery

// Replace the HTML
$("body").html("I will change the body content"); 

<p>I will be erased !</p>

DOM Web API - Add

• With the WebAPI

// Replaces body content with an HTML code
document.body.innerHTML = "<p>I will change the body content</p>";  
// Add another HTML content
document.body.innerHTML += "<p>I will change the body content too</p>";  

<p>I will be erased !</p>

JQuery - Add (Before / After)

• With Jquery

// Append (at the end)
$("body").append("<p>Another text at the end</p>");
// Prepend (at the beginning)
$("body").prepend("<p>Another text at the begining</p>");

<p>The original content</p>