JavaScript

JavaScript Approach to Dynamically Generate List Elements Using the while Loop

 

In real-world web development, using JavaScript to dynamically generate content is a common technique to improve site usability and performance. This article explains in detail how to use a while loop to dynamically add li tags within an HTML ul tag and explores how this contributes to the efficiency and scalability of web pages.

This process is very similar to the previous article (JavaScript: Utilizing the for Loop to Dynamically Generate and Add HTML Tag Elements – A Complete Guide).

Contents
  1. Role of Web Development and JavaScript
  2. The Importance of Writing Efficient Code
  3. Role and Implementation of Styling
  4. Designing the HTML Structure
  5. Implementation – Dynamically Generating Elements with JavaScript
  6. Demo Page of Adding li Tags within a ul Tag Using a while Loop
  7. Conclusion

Role of Web Development and JavaScript

In web development, there are many ways to efficiently generate and manage repeating elements on a page. Among them, JavaScript is a frequently used language in front-end development. Therefore, understanding how to use the basic loop structure, the while loop, is fundamental for web developers.

The Importance of Writing Efficient Code

When writing programs, code simplicity and efficiency are crucial as they directly impact page load speed and ease of maintenance. Generating repeated elements with JavaScript can reduce the size of HTML files and improve code readability.

Role and Implementation of Styling

How HTML elements are styled and presented on the page is controlled by CSS. The following CSS code is an example of styling for the ul and li elements mentioned earlier. 

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 30px 0;
}

ul{
  width: 120px;
  margin: 0 auto;
  padding: 0;
}
ul li{
  list-style: none;
  text-align: center;
  font-weight: bold;
}
</style>

　

　
CSS is used not only to enhance the appearance of dynamically generated elements but also to adjust layouts and responsive design.

Designing the HTML Structure

Next, we write HTML to define the area where elements will be dynamically added by JavaScript later. 

<h1>Using a while loop to add 10 li tags within a ul tag</h1>

<ul class="whiletxt">
</ul>

　
This ul tag serves as the output destination for the JavaScript code explained in the next step.

Implementation – Dynamically Generating Elements with JavaScript

Using JavaScript and its library, jQuery, allows for the dynamic generation and rendering of HTML elements on the page. The following code is a basic example of adding li tags to a ul element. 

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  var i=1;

  while(i<=10){
    $('.whiletxt').append('<li>Added Text'+i+'</li>')
    i++;
  }
});
</script>

　
This method allows for dynamically generating list elements based on information retrieved from a database or updating content according to user actions.

Demo Page of Adding li Tags within a ul Tag Using a while Loop

A demo page to check the implementation and its operation is provided below. This page dynamically generates 10 li elements using a while loop.

Demo of Adding li Tags within a ul Tag Using a while Loop

Conclusion

Combining JavaScript, HTML, and CSS enables the construction of dynamic and high-performance web pages. The method of generating dynamic content using a while loop, introduced in this article, has a wide range of applications in web development.
In the future, it is expected that this technology will be further developed using more advanced frameworks and libraries to create diverse web applications. In doing so, always remember the importance of understanding the basic technology and strive to improve your skills.

　
Use at your own risk. Do not copy the Google Analytics tag in the head tag.

while Loop
RELATED POST