Scribd
Upload
10 views23 pages

CH 11-3

The document discusses JavaScript DOM extensions, including: 1) The innerHTML, outerHTML, innerText, and outerText properties, which allow adding and retrieving HTML content from elements. 2) The insertAdjacentHTML() method, which inserts HTML content into specified positions relative to an element. 3) Examples are given demonstrating how to use these properties and methods to dynamically modify content in the DOM.

Uploaded by

nyinyilynn163
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views23 pages

CH 11-3

The document discusses JavaScript DOM extensions, including: 1) The innerHTML, outerHTML, innerText, and outerText properties, which allow adding and retrieving HTML content from elements. 2) The insertAdjacentHTML() method, which inserts HTML content into specified positions relative to an element. 3) Examples are given demonstrating how to use these properties and methods to dynamically modify content in the DOM.

Uploaded by

nyinyilynn163
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

University of Computer Studies

Web Technology JavaScript programming

DOM Extensions[Part-III]

JavaScript Group
Department of Information Technology Supporting and Maintenance
Reference Book

• Professional JavaScript for Web Developers , Third Edition By Nicholas C. Zakas


General lecture Plan

• Section 1 • Section 4
What is JavaScript? Document Object Model(DOM) and
JavaScript in HTML DOM Extensions
Variables, Scope, and Memory • Section 5
Events, Forms and Canvas
• Section 2 • Section 6
Language Basics Client-side Storage
Reference Types
Function
• Section 3
Understanding Objects
Window Object
Outline

• The innerHTML Property


• The outerHTML Property
• The innerText Property
• The outerText Property
• The insertAdjacentHTML() Method
• Summary
The innerHTML Property (1/4)

• In read mode, the property returns the HTML representing all of the child nodes.
Example:
<body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul></div>
<input type="button" value="Get InnerHTML" onclick="getInnerHTML()">
<script type="text/javascript">
function getInnerHTML(){
var div = document.getElementById("content");
alert(div.innerHTML); }
</script></body>
The innerHTML Property (2/4)
The innerHTML Property (3/4)
• In write mode, the property parses the given string into a DOM subtree and replaces all of the
existing child nodes with it.
Example:
<body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
</div>
<input type="button" value="Set InnerHTML" onclick="setInnerHTML()">
<script type="text/javascript">
function setInnerHTML(){
var div = document.getElementById("content");
div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";
} </script> </body>
The innerHTML Property (4/4)
The outerHTML Property (1/3)
• In read mode, the property returns the HTML of element on which it is called as well as its child
nodes.
Example:
<body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
</div>
<input type="button" value="Get OuterHtml" onclick="getOuterHTML()">
<script type="text/javascript">
function getOuterHTML(){
var div = document.getElementById("content");
alert(div.outerHTML); //works in IE, Safari, and Opera
} </script></body>
The outerHTML Property (2/3)
The outerHTML Property (3/3)

• In write mode, the property replaces the node on which it called with the DOM subtree created
from passing the given HTML string.

Example:
div.outerHTML=”<h1> Hello & World </h1>” //Hello & World
The innerText Property (1/4)

• In read mode, the property concatenates the values of all text nodes in the subtree in depth-first
order.
Example:
<body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul></div>
<input type="button" value="Get InnerText" onclick="getInnerText()">
<script type="text/javascript">
function getInnerText(){
var div = document.getElementById("content");
alert(div.innerText); }
</script></body>
The innerText Property (2/4)
The innerText Property (3/4)
• In write mode, the property removes all children of the element and inserts a text nodes containing
the given value.
Example:
<body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
</div>
<input type="button" value="Set InnerText" onclick="setInnerText()">
<script type="text/javascript">
function setInnerText(){
var div = document.getElementById("content");
div.innerText= "Hello <b> world!</b>";
} </script> </body>
The innerText Property (4/4)
The outerText Property (1/3)

• In read mode, the property behave in the exact same way as innerText property
Example:
<body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul></div>
<input type="button" value="Get outerText" onclick="getOuterText()">
<script type="text/javascript">
function getOuterText(){
var div = document.getElementById("content");
alert(div.outerText); }
</script></body>
The outerText Property (2/3)
• In write mode, the property replaces the entire element, including its child nodes.
Example:
<body>
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
</div>
<input type="button" value="Set outerText" onclick=“setOuterText()">
<script type="text/javascript">
function setOuterText(){
var div = document.getElementById("content");
div.outerText = "Hello world!";}
</script> </body>
The outerText Property (3/3)
The insertAdjacentHTML() Method

• inserts a text as HTML into a specified position.

• accepts two arguments: (the position in which to insert, the HTML text to insert)

• The first argument must be one of the following values:

 “beforebegin”— Insert just before the element as a previous sibling.

 “afterbegin”— Insert just inside of the element as a new child or series of children
before the first child.
 “beforeend”— Insert just inside of the element as a new child or series of children after
the last child.
 “afterend”— Insert just after the element as a next sibling.
The insertAdjacentHTML() Method

//insert as previous sibling


element.insertAdjacentHTML(“beforebegin”, “<p>Hello world!</p>”);

//insert as first child


element.insertAdjacentHTML(“afterbegin”, “<p>Hello world!</p>”);

//insert as last child


element.insertAdjacentHTML(“beforeend”, “<p>Hello world!</p>”);

//insert as next sibling


element.insertAdjacentHTML(“afterend”, “<p>Hello world!</p>”);
The insertAdjacentHTML() Method
The insertAdjacentHTML() Method

<body>
<ul id="list">
<li>CSS</li>
</ul>
<script>
var list = document.querySelector('#list');
list.insertAdjacentHTML('beforebegin', '<h2>Web Technology</h2>');
list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
list.insertAdjacentHTML('afterend', '<p>For frontend developers</p>');
</script>
</body>
University of Computer Studies

Thank you! 

You might also like