ehudthelefthand · March 22, 2021 06:39
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <button id="click">click me</button>
    <ul id="content"></ul>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
    <script>
        // click แล้วให้โหลด

        $('#click').on('click', function() {
            $.get('https://jsonplaceholder.typicode.com/posts', function(data) {

                // a -> b -> d -> c -> (b -> d ... loop) -> exit
                // a = ตั้งค่าเริ่มต้น
                // b = เงื่อนไข
                // d = body
                // c = เปลี่ยนค่า
                let result = ''
                for (let i = 0; i < data.length ; i++) {
                    const item = data[i]
                    const elem = `
                        <li>
                            <div class="title">${item.title}</div>
                            <p class="body">${item.body}</p>    
                        </li>
                    `
                    result += elem
                }
                $('#content').html(result)

                // $(elem).append()
                // $(elem).text()
                // $(elem).html()
            })
            $('#content').text('Loading...')
        })
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<button id="click">click me</button>
	<ul id="content"></ul>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
	<script>
	// click แล้วให้โหลด

	$('#click').on('click', function() {
	$.get('https://jsonplaceholder.typicode.com/posts', function(data) {

	// a -> b -> d -> c -> (b -> d ... loop) -> exit
	// a = ตั้งค่าเริ่มต้น
	// b = เงื่อนไข
	// d = body
	// c = เปลี่ยนค่า
	let result = ''
	for (let i = 0; i < data.length ; i++) {
	const item = data[i]
	const elem = `
	<li>
	<div class="title">${item.title}</div>
	<p class="body">${item.body}</p>
	</li>
	`
	result += elem
	}
	$('#content').html(result)

	// $(elem).append()
	// $(elem).text()
	// $(elem).html()
	})
	$('#content').text('Loading...')
	})
	</script>
	</body>
	</html>