js html method

JavaScript and HTML are two necessary components for any modern web page. HTML is the construction and representation of web page structure and content, while JavaScript is a programming language for interactivity and dynamics. When developing web pages, mastering HTML and JavaScript is a must. In this article, we will discuss some common JavaScript and HTML methods.

1. HTML method

1. innerHTML

innerHTML is an attribute of the HTML element, which allows us to insert HTML content into the specified element. For example, if we want to insert a piece of text in the element with the id "example", we can use the following code:

document.getElementById("example").innerHTML = "这是一段文字";

2. appendChild

The appendChild method allows us to Add a child element to the HTML element. For example, if we want to add a paragraph to the element with the id "example", we can use the following code:

var p = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
p.appendChild(node);

var element = document.getElementById("example");
element.appendChild(p);

In this example, we first create a

element and add it to it Add a text node. Next, we find the element with the id "example" and add the new paragraph we created to it using the appendChild method.

3. setAttribute

The setAttribute method allows us to add an attribute to an HTML element. For example, if we want to add a class attribute to the element with the id "example", we can use the following code:

var element = document.getElementById("example");
element.setAttribute("class", "new-class");

In this example, we first find the element with the id "example", and then Use the setAttribute method to add a class attribute to it. The value of this attribute is "new-class".

2. JavaScript method

1. getElementById

The getElementById method allows us to find and select the element through its id attribute. For example, if we want to select the element with id "example" and change its content to "This is new content", we can use the following code:

document.getElementById("example").innerHTML = "这是新的内容";

2. querySelector

The querySelector method allows us to select and select an element through a CSS selector. For example, if we want to select the first paragraph element with class "example" and change its content to "This is new content", we can use the following code:

document.querySelector("p.example").innerHTML = "这是新的内容";

In this example, We use the querySelector method to select the first paragraph element with class "example" and use the innerHTML attribute to change its content to "This is new content".

3. addEventListener

The addEventListener method allows us to add an event listener for a specified event. For example, if we want to add a click event listener for the element with the id "example", we can use the following code:

document.getElementById("example").addEventListener("click", function(){
  alert("您单击了'example'元素！");
});

In this example, we use the addEventListener method to add a click event listener a listener. When the user clicks on the element with the id "example", an alert box will pop up.

Conclusion

In this article, we discussed some common JavaScript and HTML methods. These methods are very important for developing web pages and are the basis for building interactive and dynamic user interfaces. If you want to become more proficient in using these methods when writing web pages, we recommend learning the basics of JavaScript and HTML first, and spending some time reading the documentation and practicing the use of these methods.

The above is the detailed content of js html method. For more information, please follow other related articles on the PHP Chinese website!