Javascript get element by id with getElementById() or $() and get value or text by id

Manipulate an element of html in javascript, you must get this element, and to get it, you need to use the javascript getElementById() method. This method is to get the element object through its id. Javascript getElementById has more characters and is longer, so now I often use $() to get the element object of html. What's going on?

In fact, the essence of $() is to get the element object of html through the getElementById() method, but this method is defined as a simple $, which is short and convenient to write. After getting the element id, you can use it to get the value and text of the element; you can also use it to determine whether the element exists. In addition to getting one element id at a time, you can also get multiple ids dynamically at once.

1. Javascript get element by id with getElementById()

If there are div element as follows:

<div id="div_id">Javascript find element by id with getElementById()</div>

var obj = document.getElementById("div_id");

The code is to get the div object through its id "div_id", and then you can perform various operations on the div, such as deleting its content, setting its properties, hiding it, and so on.

Note: The div must be loaded before the javascript code, that is, the div must be placed before var obj = document.getElementById("div_id"), otherwise an error(undefined) will be reported because the object cannot be found.

2. Javascript get element by id with $()

First need to define $:

var $ = function (obj_id) { return ("string" == typeof (obj_id)) ? document.getElementById(obj_id) : obj_id; };

In fact, $ is defined as a function(method). In this function, the object of the element is still got through the getElementById method; that is, $ itself does not have the feature of getting the object of element. It is only a character, but it is defined for a method to get an object of element.

Get the above div element represented by $ as:

var obj = $("div_id");

Instead of the getElementById method with $, you only need to write a few character. Is it convenient and fast? Especially when you want to get a lot of element objects, the advantage is more obvious. Otherwise need to write a long string of letters.

3. Javascript getelementbyid value

If you want to add a product, take the product name as an example here. First write the html code, and then the Javascript code.

Html code:

<form id="form1">
Product Name: <input id="inp_Product_Name" type="text" />
<input type="button" id="btn_Submit" value=" Submit " onclick="return Add_Product()" />
</form>

Javascript code:

<script type="text/javascript" language="javascript">
        function Add_Product() {
            var product_name = document.getElementById("inp_Product_Name");
           alert(product_name.value);
      }
  </script>

Note: The Javascript code here can be placed before the HTML code, because it is not executed when the web page is loaded, it is executed when the button is clicked.

4. Jvascript getelementbyid text

If you want to get the text of div and span separately, their codes are as follows:

Html code:

<div id="div_id">Jvascript getelementbyid text</div>

<span id="span_id">get the text of span in javascript</span>

Javascript code:

<script type="text/javascript" language="javascript">
        var $ = function (obj_id) { return ("string" == typeof (obj_id)) ? document.getElementById(obj_id) : obj_id; };
        var div_obj = $("div_id");
        var span_obj = $("span_id");
        alert(div_obj.innerHTML + "; " + span_obj.innerHTML);
  </script>

5. Javascript if document getelementbyid exists

To determine whether an element with id(img_id) exists, code can be written like this:

if(document.getElementById("img_id") != undefined)
            alert("exist");
      else
            alert("does not exist");

The "undefined" can also be replaced by null, that is, if(document.getElementById("img_id") != null).

6. Generate and get dynamic id value in javascript

(1) How to generate div id dynamically using javascript

If you want to dynamically generate 10 divs in a div, the HTML and Javascript code are as follows:

Html code:

<div id="parent_div"></div>

Javascript code:

<script type="text/javascript" language="javascript">
        function addIdDynamically(obj) {
            var parent = document.getElementById(obj);
            var parent;

            for(i = 0; i < 10; i++) {
               div_obj = document.createElement("div");
               div_obj.setAttribute("id", "div_id" + i);//Set id for new div
                div_obj.innerHTML = "div" + i;//Add text for new div
                parent.appendChild(div_obj);
            }
        }
        addIdDynamically("parent_div");
</script>

(2) How to get dynamically generated id in javascript

Take that get the id of the 10 divs generated above as an example. The Javascript code is as follows:

<script type="text/javascript" language="javascript">
        function getIdDynamically() {
            var div_obj;

            for(i = 0; i < 10; i++) {
               div_obj = document.getElementById("div_id" + i);
                document.write(div_obj.innerHTML);//Display the text of each div
            }
        }
        getIdDynamically();
</script>