Javascript learning notes (1) Basic DOM operations

The main purpose is to make yourself more proficient in DOM operations, record your own bit by bit, and standardize your own code! Hope everyone can make progress together! Partial html code: When you click show, The showValue function is triggered to dynamically Add the inputvalue value to the idtext element node! Viewsourceprint? & Lt; p & gt; & nbsp; S

The main purpose is to make yourself more proficient in DOM operations, record your own bit by bit, and standardize your own code! Hope everyone can make progress together!
Some html code:
When you click show, The showValue function is triggered to dynamically Add the value of input value to the element node id = "text!
View sourceprint?

　　

　　

Javascript code:
When a page is loaded, the input automatically obtains the focus and directs the user to input the content. (Details enhance user experience)
View sourceprint? 1 window. onload = function (){

2 var user_name = document. getElementById ("user_name ");

3 user_name.focus ();

4}

If no content is entered, an error message is displayed, and the input focus is obtained!
View sourceprint? Function showValue (){

Var user_name = document. getElementById ("user_name ");

Var text = document. getElementById ("text ");

If (user_name.value = ""){

Alert ("Please input some words ");

User_name.focus ();

} Else {

Text. innerHTML = user_name.value;

Text. setAttribute ("class", "text ");

}

}

HTML code is completely unnecessary. We can use DOM to dynamically create and add it to the document!
View sourceprint? // Create a div Element

Var text = document. createElement ("div ");

// Add the value of user_name.value to the div element.

Text. appendChild (user_name.value );

// Add the div element to the body.

Document. body. appendChild (text );