SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software jQuery and Javascript Tutorials and Code Examples
Development resources, articles, tutorials, samples, codes and tools for .Net, SQL Server, Windows, Windows Phone, SAP and ABAP, like SAP UI5, Screen Personas, etc.






Javascript jQuery Sample Code to Add HTML Element to DOM Object

This Javascript tutorial demos a jQuery code sample to add HTML element to DOM object dynamically without posting to server. If you are a web developer or Javascript developer new to jQuery library, you can find the example useful. The jQuery sample code shows how to get reference to HTML objects, how to create events like click event and use of append method, etc.

Please check the following sample case. Just type into the textbox (input field) and press button to add the text into the message list as a seperate paragraph in the messages <div> DOM object.

jQuery sample code modifying HTML element in Javascript

First of all, within the <head> tag, add the jQuery javascript library reference:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

As the second step, check the HTML code for input element (for message entry), button (firing jQuery code block) and the messages DIV object.

<div>
Please, type your message here:
<input type="text" name="yourmessage" value="your message..." />
<button>Add your message...</button>
</div>
<div id="messages">Your message list formed with jQuery!</div>

To manipulate the HTML DOM object using jQuery, by reading the input element value and modifying the target DIV object I used following Javascript code block.
You can add it to your HTML codes.

<script>
$(document).ready(
 function() {

  $('button').click(
   function() {
    var newmessage = $("input[name=yourmessage]").val();
    $('#messages').append("<p>" + newmessage + "</p>");
    return(false);
   }
  );

  $('input[name=yourmessage]').mouseenter(
   function() {
    $("input[name=yourmessage]").val("");
   }
  );

 }
);
</script>

Let's read the above jQuery code for Javascript developer and walk through the script

First of all, when the HTML document is loaded completely I can execute my code by using a function (without a name defined) which appends two events "click" and "mouseenter" events.
Click event is attached to all elements with "button" tag.
And the "mouseenter" event is attached to HTML element with "input" tag with the "name" attribute is "yourmessage"

The Javascript mouseenter event, clears the input element when the web user moves the mouse onto the HTML element.
The jQuery code $("input[name=yourmessage]") enables the developer to get the DOM reference of the input element.
Then using .val("") method with empty string, the value of the input text element is cleared.

Let's read the .click event code now.
Using the jQuery code, we create a javascript variable and store the input element text value.
Then we get the messages DIV object reference using jQuery code $('#messages')
Then we append the HTML code - (or object) that surrounds the stored text with "p" tags - to the messages DIV

Let's try and see how the jQuery example code works:

Please, type your message here:
Your message list formed with jQuery!





Javascript

Javascript Articles

Javascript Forums












Javascript Tutorials, Articles and Javascript Codes

Morris Number Sequence Puzzle Solution in Javascript
Javascript Array Puzzle: People with Sword Around a Circle
Sort Array in Random Order using Javascript Shuffle Function
Javascript MultiDimensional Array example codes
How many times a day a clock's hands overlap?
Javascript For Loop Sample Code
Use Javascript Replace Function Example to Replace Multi Space in a String with Single Space
Javascript String Trim with Javascript Trim Function Examples
Javascript String Split Function Example & Split Javascript Tutorial
Javascript Phone Format : Phone Number Format and Mask Telephone Numbers with Javascript
How to Enable / Disable Submit Button using Javascript According to any CheckBox is Checked on a WEB Page
Error Handling in JavaScript using Try...Catch Statement
How to display or unhide hidden table rows and hide or toggle a table row using Javascript functions
How to Replace All Occurrences of a String using Javascript Replace Function
How to autoformat and mask telephone numbers with Javascript
How to get key codes of characters using javascript code and key code list
Javascript Forums




Copyright © 2004 - 2017 Eralper YILMAZ. All rights reserved.
Community Server by Telligent Systems