HTML - (Content of an element|Content Model)

About

The contents of an element are its children in the DOM tree.

Each element has a content model: a description of the element's expected contents.

HTML Authors must not use HTML elements anywhere except where they are explicitly allowed, as defined for each element, or as explicitly required by other specifications (such as ATOM)

Category

Each element in HTML falls into zero or more categories that group elements with similar characteristics together.

Rendering

The content is rendered within the css box in the middle.

See CSS - Content (Property)

DOM (Javascript)

This code shows you how to select element by Id and set the content with the Javascript DOM API

textContent

textContent will do the following text transformation:

In the example below, we demonstrate that:

Example:

  • The javascript that selects the p element and set the text content
document.getElementById('myId').textContent = `<strong>New 
Content
</strong>
`;
  • The HTML
<p id="myId"></p>
  • The result

innerText

innerText will do the same as textContent except that it will preserve the EOL (end of line) by transforming them as br element

Example:

  • The javascript that selects the p element and set the innerText
document.getElementById('myId').innerText = `<strong>New 
Content
</strong>
`;
  • The HTML
<p id="myId"></p>

innerHTML

innerHTML will see the text passed as HTML markup and transform it in DOM elements

Example:

  • The javascript that selects the p element and set the innerHTML
document.getElementById('myId').innerHTML = `<strong>New 
Content
</strong>
`;
  • The HTML
<p id="myId"></p>
  • The result: the text was interpreted as HTML

Documentation / Reference


Powered by ComboStrap