Home Web Front-end JS Tutorial JavaScript method to dynamically add LI elements to OL list_javascript skills

JavaScript method to dynamically add LI elements to OL list_javascript skills

May 16, 2016 pm 04:08 PM
javascript Dynamically add method

The example in this article describes the method of dynamically adding LI elements to the OL list using JavaScript. Share it with everyone for your reference. The specific analysis is as follows:

JavaScript method to dynamically add LI elements to the OL list. The following JS code will dynamically add an LI element to the OL list every time the button is clicked

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<script type="text/javascript">

function addItem() {

 var myitem = document.getElementById("ItemToAdd").value;

 var mylistItems = document.getElementById("mylist");

 var newP = document.createElement("li");

 var textNode = document.createTextNode(myitem);

 newP.appendChild(textNode);

 document.getElementById("mylist").appendChild(newP);

 return false;

}

</script>

<form onsubmit="return addItem()" action="#">

<span>Grocery Items:</span>

<input type="text" id="ItemToAdd" value="Milk" />

<input type="button" value="Add" onclick="addItem()" />

</form>

<span>Grocery List:</span>

<ol id="mylist"></ol>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel. How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel. Mar 28, 2024 pm 12:50 PM

How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel.

How to delete WeChat friends? How to delete WeChat friends How to delete WeChat friends? How to delete WeChat friends Mar 04, 2024 am 11:10 AM

How to delete WeChat friends? How to delete WeChat friends

How to enter bios on Colorful motherboard? Teach you two methods How to enter bios on Colorful motherboard? Teach you two methods Mar 13, 2024 pm 06:01 PM

How to enter bios on Colorful motherboard? Teach you two methods

How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts) How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts) May 01, 2024 pm 12:01 PM

How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts)

Summary of methods to obtain administrator rights in Win11 Summary of methods to obtain administrator rights in Win11 Mar 09, 2024 am 08:45 AM

Summary of methods to obtain administrator rights in Win11

Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed! Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed! Mar 23, 2024 am 10:42 AM

Quickly master: How to open two WeChat accounts on Huawei mobile phones revealed!

Detailed explanation of Oracle version query method Detailed explanation of Oracle version query method Mar 07, 2024 pm 09:21 PM

Detailed explanation of Oracle version query method

The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs) The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs) May 04, 2024 pm 06:01 PM

The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs)

See all articles