DOM - Element content
Table of Contents
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>
2 - Articles Related
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>
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
- With Jquery
// 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
- 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>
3.3.2 - 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>
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>