Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to add and delete messages on the message board by JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Realize the effect

Run the code interface:

Enter a message to add: (the latest message will be displayed at the top)

Delete message: (click which one to delete the message)

After the display of the main features and effects, the HTML and CSS styles are not affected here, and the JS code will be added directly below:

/ / get the desired element object var text = document.querySelector ("textarea"); var btn = document.querySelector ("button"); var ul = document.querySelector ("ul") / / Registration event btn.onclick = function () {/ / bind the click event if to the release button (text.value = "") {/ / determine whether the text.value is empty, that is, whether the user has input alert ("cannot publish empty content!") ; return false;} else {/ / if the user has input content, it will be assigned to the created element li for display / / 1. Create the element var li = document.createElement ("li"); Li [XSS _ clean] = text.value + "delete"; / / assign the user input to the created li element and add an a tag to delete the message / / 2 later. Add the element / / ul.appendChild (li); / / write a message in this way is appended to the ul.insertBefore (li, ul.children [0]) shown later / / Let the new messages be displayed at the top, that is, in the order from bottom to top / / delete elements: delete the li node where the current a tag is located, that is, its parent element var as = document.querySelectorAll ("a"); for (var I = 0; I < as.length) Li +) {as [I] .onclick = function () {/ / the li to be deleted is the parent element of a, that is, is [XSS _ clean]; ul.removeChild (is [XSS _ clean]) / / Delete the li node in ul, and li is the parent node of the current a tag. Note the relationship between them} text.value = ""; / / finally, clear the contents in the message input box to facilitate re-comment} core knowledge:

Add an element node to the page:

We want to add a new element to the page in two steps: 1. Create elements; 2. Add element

1. Create element: element.createElement ("element tag created")

two。 Add elements: node.appendChild (child); / / node is the parent, that is, which parent element is added, and child is the created child element. Note: this way of adding elements is similar to the push method in the array, that is, appending elements to the end.

Add a node to the specified location: (mainly added to the display in front of the specified element)

Node.insertBefore (child, specified element); / / "specified element" refers to the element to which the child is added. "specified element" must also be a child element of node.

Delete the page element node:

Node.removeChild (child); / / node is the parent element, and child is a child element in node

The main realization idea: here is the main use of the function of adding nodes and deleting nodes to the page, binding the two functions to different buttons, such as adding nodes to the "release" button, the function of deleting nodes to the "delete" button, that is, to achieve such a simple version of the message board case.

This is the end of the content of "how to add and delete messages on the message board by JavaScript". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.