DOM - Element content

> (World Wide) Web - (W3|WWW) > The Document Object Model W3C API Interface (DOM)

1 - 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>
Advertising

3 - Management

3.1 - Get

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

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

Advertising

3.2 - (Update|Replace)

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

3.2.2 - Jquery Update

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

3.3 - Add

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

Advertising

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

4 - Note

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

5 - Documentation / Reference

web/dom/content.txt ยท Last modified: 2019/02/16 17:40 by gerardnico