DOM - Element content

About

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>

Management

Get

Dom Web API - Get

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

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> 

(Update|Replace)

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

// Replace the HTML
$("body").html("I will change the body content"); 
<p>I will be erased !</p>

Add

DOM Web API - Add

// 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)

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

Note

Content Property

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>

Documentation / Reference


Powered by ComboStrap