• DOM Manipulation

    DOM Manipulation

    In jQuery DOM Manipulation part, jQuery contains powerful methods for changing and manipulating HTML elements and attributes. jQuery comes with a bunch of DOM related methods, that makes it easy to access and manipulate elements and attributes.

    DOM (Document Object Mode) Definition:

    The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

    Get and Set Content of HTML Elements:

    There are three simple, but useful, jQuery methods for DOM manipulation is:

    1. text() – Sets or returns the text content of selected elements
    2. html() – Sets or returns the content of selected elements (including HTML markup)
    3. val() – Set or returns the value of form fields

    A Callback Function as text(), html(), and val():

    All of the three jQuery methods above: text(), html(), and val(), also come with a callback function. The callback function has two parameters: the index of the current element, and original (old) value.

    Get and Set Attributes of HTML Elements:

    attr() – This method is used to get and set attribute values.

    A Callback Function as attr():

    The jQuery method attr(), also come with a callback function. The callback function has two parameters: the index of the current element and the original (old) attribute values.

    jQuery Get/Set Content Program Code

    Example:

    jQuery Get/Set Content Example

    jQuery Get/Set Content Example

    I have created very simple example to understand jQuery methods for get content of HTML Elements.

    1. First create the New PHP Project in Netbeans.
    1. Add the jQuery libraries. Also add these libraries to your web page.

    <!–Include jQuery Library–>

    <script src=”js/jquery-1.11.3.min.js”></script>

    1. Now start to draw the design structure which supports the above design. Code written below.
    <form name=”frmGetSetContent” method=”post” action=””><table border=”1″>

    <tr>

    <th colspan=”2″>Example-Get Content of HTML Element</th>

    </tr>

    <tr>

    <td colspan=”2″ id=”tdString”>

    <div id=”divString” style=”background-color: black;

    color: white;

    text-align: center;”>

    Wel-Come to 4gl-tutorials.com

    </div>

    </td>

    </tr>

    <tr>

    <td colspan=”2″>

    <center>

    <input type=”submit” value=”Get Content” name=”btnGetText” />

    </center>

    </td>

    </tr>

    <tr>

    <td>Get html() Value :</td>

    <td id=”txtHTMLOutput”>

    </td>

    </tr>

    <tr>

    <td>Get text() Value :</td>

    <td id=”txtTextOutput”>

    </td>

    </tr>

    </table>

    </form>

    1. Write jQuery code for, when submit button is clicked “DIV” text and html properties are get and displayed in table.

    Note: Here, Submit button click has not recognized by the jQuery code. So, form submit event is used to perform sliding operation.

    <!–jQuery Code to Get Content of HTML Element–><script>

    $(document).ready(function(){

    $(“form”).submit(function(event){

    event.preventDefault();

    $(“#txtTextOutput”).text($(“#divString”).text());

    $(“#txtHTMLOutput”).text($(“#tdString”).html());

    });

    });

    </script>

    1. Now save and run the practical.
    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

Your email address will not be published. Required fields are marked *