Aquí en este artículo, veremos cómo podemos agregar una lista a la Lista desordenada usando jQuery. Entonces, la función que usamos para agregar los elementos en la lista es:
<script>
$(document).ready(function() {
$('.btn').click(function(){
var content = $('#addList').val();
var fixingContent='<li>'+content+'</li>';
$('.List').append(fixingContent);
})
})
</script>
Enfoque: Primero, creamos un botón que proporciona la funcionalidad para agregar los elementos a la lista.
Cuando se hace clic en el botón, a través de la ID del botón, primero almacenaremos la entrada del cuadro de texto en el contenido de la variable que tiene su valor y luego simplemente colocaremos el contenido en la variable fixedContent='<li><span>’+content+'</ intervalo></li>’
Después de eso, simplemente agregamos el contenido a la lista que tiene una clase llamada lista.
Implementación de código:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style>
.btn {
width: 66px;
height: 21px;
margin: 5px;
padding: 0px;
border-color: #b6b6bb;
}
#addList {
border-color: rgb(183, 252, 252);
}
</style>
<script>
$(document).ready(function() {
$('.btn').click(function() {
var content = $('#addList').val();
var fixingContent =
'<li>' + content + '</li>';
$('.List').append(fixingContent);
})
})
</script>
</head>
<body>
<h3 class="head"> Type List to Add</h3>
<input type="text" id="addList">
<input type="button" name="add"
class="btn" value="Add">
</button>
<div class="addTask">
<ul class="List">
</ul>
</div>
</body>
</html>
Salida :
Publicación traducida automáticamente
Artículo escrito por rohit2sahu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA