DOM example → Dynamically generate HTML tags and display data on the database

Introduction

How to dynamically generate HTML tags in business, pass database data to them, and display them on the screen Since you taught me, I will give you a memo for yourself and practice writing articles.

Source code

Below is an example using DOM. HTML

display.html

<div class="content">
	<p id=displayTitle>
title
	</p>
	<div id="displayBox" class="displayBox">
	<!--This is where the dynamically generated p-tag goes!-->
	</div>
</div>

Here, we simply generate an html file to put the dynamically generated p tag. The content of the div tag is empty because jQuery generates what you want to display in \ #displayBox.

Processing in jQuery

display.js

		$.ajax({
				type: "GET",
				url: '/xxx/display/displayReturn',
				dataType: 'json',
				//data is the server-Variables received from
				success: function(data) {
				
			var contents = data;
				//The displayBox stores the data to be displayed on the screen.
				var $displayBox = $('#displayBox')
				//Finally, make an array to put the elements in the displayBox together
				var addItemList = [];
				
				//Rotate the data received by the extended for statement one by one
				contents.forEach(function(elem) {
				
					//Define p tag"{"I will put elements after that
					var $displayItem = $('<p/>', {
					
						//Define the text displayed in the p tag
						text : elem.displayText,
						
						//define id
						id    : elem.displaySeq + "d",
						
						//Give class name
						class : "displayContent"
					})
					//When attaching a child element to the generated p tag
					$displayItem.append ($('<span/>', {
						class : "children"
					}))
					//Store in an array
					addItemList.push($helpItem) 
				});
				
			 	//Stored together in variables to be passed to the screen
				$displayBox.append(addItemList)
		}

Here, we show the process to display the property of data (argument) acquired by communicating with the server side using ajax by inserting it in the dynamically generated p tag. The displayText is an image that contains the text to be displayed in html obtained from the database on the server side, and the displaySeq is an image that contains the serial number of the records obtained from the database, in order to give different ids to the generated tags. I will use it for you! Example id = "1d" d is an acronym for display (laughs)

You can also create a span tag etc. as a child element by using append under the p tag. I posted it for reference. If you add a Font Awesome class here, you can add icons etc. to each p tag!

java processing (server-side processing)

displayAction.java

		public List<JsonData> displayReturn() {

		//Get the data you want to display from the DB
		List<ContentEntity>contents =new ArrayList<ContentEntity>();
		contents = displayService.getContents();
		//Here, contents has a String type displayText as a property.(Contains multiple content type instances with p tag) and long type displaySeq
		
		//List to pass as json
		List<JsonData> jsonDataList = new ArrayList<>();
		
		for (ContentEntity entity : contents) {
			//Enter the value in the json conversion method
			JsonData jsondata = createJsonData(entity.getDisplayText(),entity.getDisplaySeq());
			//Put the generated json data in the list
			jsonDataList.add(jsonData);
		}

		return jsonDataList;
	}

Finally, java processing. Asynchronous communication of html → js in order (the part above success) → java processing → js DOM generation. The java part is not very important, so I put it at the end. action-> service-> dao-> database and processing continues, but here only the action part is posted. Also, there is a method for converting to jsondata as a private method, but I will omit it (laugh)

in conclusion

Creating a DOM element may seem difficult at first, but as soon as you create it, you will get an image, so please refer to it! Thank you for watching! !!