Common Output Techniques in JS - Part 2
•JavaScript•3 min read
JavaScriptDOM ManipulationWeb Development
Learn how to dynamically modify your webpage content using powerful DOM manipulation techniques in JavaScript, including innerHTML, outerHTML, and document.write().
4: innerHTML Property
- The
innerHTMLproperty is used to access or modify the HTML content within an element. - It can render a string or an HTML element inside the selected element.
- When an HTML element is rendered using
innerHTML, it is rendered as a child of the selected element.
Example:
- Suppose we have an empty
<div>element in our HTML:
<div id="container"></div>- To modify this
<div>using JavaScript, we first assign anidof container to the<div>. - Then, we select this
<div>element in JavaScript and store it in a variable calledbox:
let box = document.getElementById('container');- Next, we use the
innerHTMLproperty to add an<h1>heading inside the<div>:
let box = document.getElementById('container');
box.innerHTML = '<h1>This is a heading</h1>';- This will render the
<h1>element with the content "This is a heading" inside the<div>. - let's take a element inside the
<div>.
<div id="container">
<p>This is a paragraph</p>
</div>- using innerHTML will replace the existing elements. For example:
let box = document.getElementById('container');
box.innerHTML = '<h1>This is a heading</h1>';- The
<h1>element will replace the existing<p>element within the<div>.
Summary:
- The
innerHTMLproperty allows us to dynamically change or add HTML content within an element. - It replaces any existing HTML content with new content when used.
5: outerHTML Property
- The
outerHTMLproperty is used to access or modify the entire HTML element, including its content and tags. - It replaces the entire HTML element, not just the inner content.
Example:
- Suppose we have the following paragraph element in our HTML:
<p id="message">This is a paragraph.</p>- This
<p>tag contains the content "This is a paragraph." - We want to change this paragraph tag to a heading tag using
outerHTML. - To achieve this, we first assign an
idofmessageto the<p>tag. - Next, we access this element in JavaScript and store it in a variable called
message:
let message = document.getElementById('message');- We then use the
outerHTMLproperty to replace the entire<p>element with an<h1>element:
let message = document.getElementById('message');
message.outerHTML = '<h1>This is a heading</h1>';- This updates the HTML, and now the content is enclosed in an
<h1>tag instead of a<p>tag.
Summary:
- The
outerHTMLproperty allows us to access and manipulate the complete HTML representation of an element, including its start and end tags. - It can replace the entire element, making it a powerful tool for DOM manipulation.
6: document.write() Method
- The
document.write()method is used to dynamically write content directly to an HTML document. - It allows you to output text or HTML markup directly to the webpage.
Example:
- Basic Usage of
document.write():- If your HTML page initially has no content, you can use
document.write()to add text to it.
- If your HTML page initially has no content, you can use
document.write('The coding CO.');- This code will display the text "The coding CO." directly on the webpage.
- Displaying HTML Markup with
document.write():- You can also use
document.write()to insert HTML elements into the page.
- You can also use
document.write('<h1>This is a heading</h1>');- This code will render a
<h1>heading element with the content "This is a heading". - Appending Content with
document.write():- When using
document.write()multiple times, it does not replace existing content. Instead, it appends the new content to the existing document.
- When using
document.write('Hello, World!');
document.write('<p>Welcome to JavaScript!</p>');- Both lines of content will appear one after the other on the webpage.
Summary:
- The
document.write()method is a simple way to output text or HTML directly to the webpage. - However, it appends content if used multiple times, making it suitable for adding new elements without removing existing ones.
