DOM - Element content

Content is a type of node that represents a XML content element (and therefore also a HTML content element if the document type is HTML)

ie

<tag>
content
</tag>

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> 

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> 

• 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>

• With Jquery

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

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

• 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>

• 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>

The content property has no effect.

document.body.content= "<p>I will change the body content</p>";  // Replaces body content with an empty string.

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

• https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML