Broad Network


HTML DOM 5 Element Content

DOM5 HTML Basics – Part 6

Forward: In this part of the series we see how to get and set an element and its content.

By: Chrysanthus Date Published: 26 Jul 2012

Introduction

This is part 6 of my series, DOM5 HTML Basics. In this part of the series we see how to get and set an element and its content. I assume, you have read the different parts of the series before reaching here; this is a continuation.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Getting Content of a Double-Tag Element
In order to get (read) the content of a double tag element, you have to use the DOM attribute called, innerHTML. Read and try the following code, using an image of your choice in the same directory as the web page file:

<!DOCTYPE HTML>
<html>
<body>

    <p id="P1">text <img src="pic.png">text</p>

    <script type="text/ECMAScript">
        myCont = document.getElementById('P1').innerHTML;
        alert(myCont);
    </script>

<body>
</html>

Setting Content of a Double-Tag Element
Now, the value assigned to innerHTML is text in a string. This text may contain quotes. Such internal quotes should be escaped, with the forward slash. Also with the new browsers, any html element in the text is implemented. For example, if you have an image tag in the text, you will see the image. Read and try the following code with an image of your choice.

<!DOCTYPE HTML>
<html>
<body>

    <p id="P1"></p>

    <script type="text/ECMAScript">
        document.getElementById('P1').innerHTML = "<p id="P1">text <img src="pic.png">text</p>";
    </script>

<body>
</html>

Getting Text-Only Content
The innerHTML attribute would get or set content within tags that can include smaller elements and their tags. However, when the element has only text within its tags, you can use the textContent attribute. The following code gets the text of a span element.

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
    
    <span id="S1">some string</span>

    <script type="text/ECMAScript">
        alert(document.getElementById('S1').textContent)
    </script>

</body>
</html>

Setting Text-Only Content
You use the textContent attribute. The following code sets the text of a span element:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>
    
    <span id="S1"></span>

    <script type="text/ECMAScript">
        document.getElementById('S1').textContent = "Yeah man.";
    </script>

</body>
</html>

Getting Content and its Outer Tags
The DOM innerHTML attribute is for getting and setting the content in between the tags of an element. On the other hand, the DOM outerHTML attribute is for getting and setting both the content of the element and the tags of the element, at the same time. Read and try the following code with an image of your choice in the same directory as the web page:

<!DOCTYPE HTML>
<html>
<body>

    <p id="P1">text <img src="pic.png">text</p>

    <script type="text/ECMAScript">
        myCont = document.getElementById('P1').outerHTML;
        alert(myCont);
    </script>

<body>
</html>

Setting Content and its Outer Tags
Setting outerHTML is the reverse of getting it. However, here, at least the element’s tags with the ID should already exist. Read and try the following code:

<!DOCTYPE HTML>
<html>
<body>

    <p id="P1"></p>

    <script type="text/ECMAScript">
        document.getElementById('P1').outerHTML = "<p id="P1">text <img src="pic.png">text</p>";
    </script>

<body>
</html>

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Related Links

Major in Website Design
Web Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT

Comments

Become the Writer's Fan
Send the Writer a Message