DOM manipulating with JavaScript

Javascript, 2015-06-16 23:12:42 UTC

Scripting language usually used for small applications. At the present time, scripting language has evolved become enterprise applications. In the past, JavaScript has widely used to control the HTML page. But, today, JavaScript evolved widely as game engine, animation page, UI framework and so on.

In this post, I will show you how to manipulate HTML DOM using JavaScript by exercise;

1. Adding an DOM node

<!DOCTYPE html>
<html>
    <head>
        <title>Example 1</title>
    </head>
    <body>
        <div id="ele01"></div>
        <script>
              document.getElementById('ele01').innerHTML = "Hi, this is an alement";
        </script>
    </body>
</html>
 If we run the script, we will see "Hi, this is an alement" exactly in div#ele01 box.
 
 

2. Adding an attribute into element
Let's continue above example, now. Now, open the developer tools on Chrome Browser. Just follow this step;

 



3.  Adding a text into each element in HTML DOM Just write an HTML page like below;

<!DOCTYPE html>
<html>
    <head>
        <title>Example 1</title>
        <style>
            #the_head { background-color: green; padding: 4px; }
            .the_body { background-color: black; color: white; padding: 4px; }
            .the_footer { background-color: orange; padding: 4px; }
        </style>
    </head>
    <body>
        <div id="ele01">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

Open up your developer tools and follow below picture




4. Adding class or div into The element. Adding class or div into the element can be done by method attribute. You can also add the other attribute such as style, href, onclick, etc. Open up your developer tools to continue above example and write this on it.

 

Sumber: http://www.develbook.com/2015/02/dom-manipulating-with-javascript.html

 


Share: