Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve a simple version of JavaScript to publish and delete messages". 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!

First, the user enters the content in the input box, presses the publish button, sends the content to the li below, and clears the content in the input box

The following li element is created later

Document textarea {resize: none Border: 1px solid pink} publish / / Click the publish button to get the text in the text field Give the value / / in the newly created li below to get the text box element, button element var text = document.querySelector ('textarea') var btn = document.querySelector (' button') var ul = document.querySelector ('ul') / / create a new li element when the button is pressed Put it after ul btn.onclick = function () {/ / create the li element because every time the button is pressed Next, you will add a li, which requires a loop / / to judge when the content in the text box is empty. Pressing the button will not add if (text.value! ='') {var li = document.createElement ('li') ul.appendChild (li) / / add node / / assign the contents of li [XSS _ clean] = text.value / / after pressing the button The value in the text box should be cleared text.value =''}}

Analysis:

1. After clicking the button, dynamically create a li and add it to the ul

2. When creating li, assign the value in the text field to li through Li [XSS _ clean]

3. Use appendChild if you want to display the new message at the back, and insertBefore if it appears in front.

How to implement it in front of you:

And implement the case of deleting messages:

Add a delete button after adding a li

1. Add a deleted link while assigning the value of the text field to li

2. You need to get each link. When you click on a link, delete the li; where the current link is located, that is, the father of the current link.

3. To prevent links from jumping, you can add _ javascript:void (0) or _ javascript:

Document textarea {resize: none; border: 1px solid pink} li {background-color: pink; margin-top: 2px; width: 630px; height: auto; line-height: 30px;} p {font-size: 15px Margin-top: 0px; float: left;} button {width: 50px; height: 30px} li a {float: right } publish / / Click the publish button to get the text in the text field Get the text box element and button element var text = document.querySelector ('textarea') var btn = document.querySelector (' .btn') var ul = document.querySelector ('ul') console.log () / / create a new li element when the button is pressed Put it after ul btn.onclick = function () {/ / create the li element because every time the button is pressed Next, you will add a li, which requires a loop / / to judge when the content in the text box is empty. Press the button will not add if (text.value! ='') {var li = document.createElement ('li') / / li to create a p content / / var p = document.createElement (' p') / / var dele = document.createElement ('button') / / ul.appendChild (li) ul.insertBefore (li Ul.children [0]) / / add p / / console.log (ul.children [0]) / / ul.children [0] .appendChild (p) / add delete button / / ul.children [0] .appendChild (dele) to li / / add node / / assign the content in li [XSS _ clean] = text.value + "delete" / / delete [XSS _ clean] = 'delete' / / dele.style.float = 'right' / / after pressing the button The value in the text box is to clear text.value =''/ / delete the element, delete the li, and the parent of the current a link var as = document.querySelectorAll ('a') for (var I = 0 I < as.length Li +) {as [I] .onclick = function () {/ / node.removeChild (clean) / / This [XSS _ clean] father is ul ul.removeChild (This [XSS _ clean])}} / / Why does this loop operation not work outside the button click event}} "how to achieve a simple version of JavaScript to publish and delete messages" is introduced here. 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.