What is the difference between the text and val methods?

Simply put, the way you get the results and the results you get are different.Therefore, the value obtained by one method cannot be obtained by the other method.For example, consider two HTML elements:

<input value="Hello,val()!">
<div>Hello, text()!</div>

The input element value ellHello,val()! 」 cannot be retrieved by the text method, but can be retrieved by using the val method.

console.log($("input").text());//=>"
console.log($("input").val());//=>Hello,val()!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="Hello,val()!">

Also, the div element text "Hello, text()!" cannot be retrieved by the val method, but can be retrieved by using the text method.

console.log($("div").val());//=>"
console.log($("div").text());//=>Hello, text()!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Hello, text()!</div>

The above behavior occurs because the val method is for to get the value of the value attribute, whereas the text method is for to get the text of the element.If you want to get text for an element, you must use the text method instead of the val method, which is used to get values from the value attribute, such as the input, select element.

The jQuery.fn.text method is defined as follows, and jQuery.t when invoked without passing arguments.Call the ext method to retrieve the DOM node text by Node.nodeValue, by .Also, if you pass a function to an argument, the function is executed and the result is substituted for the Node.textContent property.If you simply pass a string, it is substituted for the Node.textContent property.

 text:function(value){
  return access(this, function(value){
    return value === undefined ?
      jQuery.text(this):
    This.empty().each(function(){
      if(this.nodeType===1||this.nodeType===11||this.nodeType===9){
        This.textContent=value;
      }
    });
  }, null, value, arguments.length);
}

If the jQuery.fn.val method is invoked without passing any arguments (!arguments.length), the following actions are taken:If you call the jQuery.fn.val method without passing any arguments, you can see that the value of the value attribute for that element or an empty string or undefined is returned.

val:function(value){
  varhooks, ret, valueIsFunction,
      em = this [0];

  if(!arguments.length) {
    if(em){
      hooks=jQuery.valHooks [elem.type]||
        jQuery.valHooks [em.nodeName.toLowerCase()];

      if(hooks&&
          "get" in hooks &
          (ret=hooks.get(elem, "value"))!==undefined
         ) {
        return;
      }

      ret = elem.value;

      // Handle most common string cases
      if(typeofret==="string"){
        return return.replace(rreturn, "");
      }

      // Handle cases where value is null/undefor number
      return ret == null ? ":ret;
    }

    return;
  }

  // omission
}

Then, if you pass the argument to the jQuery.fn.val method, the following actions are taken:When you read this code, if the argument passed is a function, you set the string to undefined or null if the argument is just a string, and if it is an array, the concatenation of values in the array to the element value attribute.Note, however, that the value attribute is not always used because valHooks may use a method other than the value attribute.

val:function(value){
  varhooks, ret, valueIsFunction,
      em = this [0];

  // omission

  valueIsFunction=isFunction(value);

  return this.each(function(i){
    varval;

    if(this.nodeType!==1){
      return;
    }

    if(valueIsFunction){
      val=value.call(this,i,jQuery(this).val());
    } else{
      val = value;
    }

    // Treat null/undefined as"; convert numbers to string
    if(val==null){
      val="";

    } else if(typeofval==="number"){
      val+="";

    } else if(Array.isArray(val)) {
      val=jQuery.map(val, function(value){
        return value == null ?\":value+"";
      });
    }

    hooks=jQuery.valHooks [this.type]||jQuery.valHooks [this.nodeName.toLowerCase()];

    // If set returns undefined, fall back to normal setting
    if(!hooks||!("set" in hooks)||hooks.set(this,val,"value")=== undefined){
      This.value=val;
    }
  });
}

The above shows that the jQuery.fn.text method uses the Node.nodeValue property, the Node.textContent property, and the jQuery.fn.val method basically uses the value attribute.code.The results are different.