JavaScript innerHTML และ innerText:A Guide

คุณจะต้องรู้วิธีเปลี่ยนข้อความหรือ HTML ที่ปรากฏบนหน้าเพื่อทำให้ไซต์ของคุณมีการโต้ตอบมากขึ้น นั่นคือที่ ข้อความภายใน และ innerHTML แอตทริบิวต์ HTML เข้ามา

คุณลักษณะเหล่านี้ทำให้ง่ายต่อการเปลี่ยนข้อความขององค์ประกอบ DOM และโค้ด HTML ในคู่มือนี้ คุณจะได้เรียนรู้วิธีใช้ JavaScript innerText และ innerHTML คุณสมบัติ

จาวาสคริปต์ innerHTML คืออะไร

คุณสมบัติ JavaScript innerHTML ตั้งค่าเนื้อหา HTML ขององค์ประกอบบนหน้าเว็บ InnerHTML เป็นคุณสมบัติของ HTML DOM innerHTML มักใช้เพื่อตั้งค่าและแก้ไขเนื้อหาของ

องค์ประกอบ

คุณสามารถใช้ innerHTML ดังนี้:

document.getElementById(“ย่อหน้า”).innerHTML =“อาชีพกรรม!”;

โค้ดบรรทัดนี้กำหนดเนื้อหาขององค์ประกอบ "ย่อหน้า"

เป็น "Career Karma!" เมธอด getElementById() จะดึงข้อมูลองค์ประกอบโดยใช้ ID

เบราว์เซอร์กำหนด Document Object Model (DOM) เมื่อโหลดหน้า DOM นี้เป็นชุดของออบเจ็กต์ที่แสดงบนหน้า

DOM หมายความว่าคุณไม่จำเป็นต้องเปลี่ยนโค้ด HTML ทุกครั้งที่คุณต้องการเปลี่ยนองค์ประกอบเว็บ คุณสามารถใช้ DOM และ JavaScript เพื่อเปลี่ยนลักษณะที่หน้าปรากฏในเซสชันใดเซสชันหนึ่งได้

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

JavaScript innerText คืออะไร

คุณสมบัติ JavaScript innerText ตั้งค่าเนื้อหาข้อความขององค์ประกอบ นอกจากนี้ยังกำหนดเนื้อหาของลูกหลาน ทายาทอาจรวมแท็ก ไว้ในย่อหน้า

ไวยากรณ์ของ innerText คล้ายกับ innerHTML:

document.getElementById(“องค์ประกอบ”).innerText =“นี่คือการทดสอบ”;

ตั้งค่าข้อความขององค์ประกอบที่มีรหัส "องค์ประกอบ" เป็น "นี่คือการทดสอบ"

คุณสามารถทดสอบวิธีการเหล่านี้ได้โดยไปที่คอนโซล JavaScript และเลือกองค์ประกอบที่จะเปลี่ยน:

สิ่งนี้จะเปลี่ยนเนื้อหาของแท็ก HTML

แรกบนหน้าเว็บ หากคุณต้องการแทนที่ข้อความ คุณสามารถใช้ innerText แอตทริบิวต์:

สิ่งนี้จะเปลี่ยนเนื้อหาของย่อหน้าที่สอง (แสดงด้วยหมายเลข 1) บนหน้าเป็น “นี่คือการทดสอบ”

การใช้ innerHTML และ innerText ใน JavaScript

เริ่มต้นด้วยการเปลี่ยนข้อความบนหน้าเว็บ เรากำลังจะสร้างหน้าเว็บ flashcard อย่างง่าย หน้าเว็บนี้จะแสดงคำถามเกี่ยวกับ HTML จะมีปุ่มซึ่งเมื่อคลิกแล้วจะเปิดเผยคำตอบสำหรับคำถามเกี่ยวกับ HTML

สร้างเว็บเพจ

ขั้นตอนแรกของเราคือการสร้างไฟล์ index.html สำหรับส่วนหน้าของเรา:

<!DOCTYPE html>
<html>
    <head>
   	 <title>HTML Flashcard App</title>
	<link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
   	 <div class="flashcard">
   		 <h2>Does a hyperlink only apply to text?</h2>
   		 <p>The answer will be revealed when you press "Show answer"</p>
   		 <button id="showAnswer">Show answer</button>
		 <br /> <br />
		 <div id="showMessage"></div>
   	 </div>
	<script src="./scripts.js"></script>
    </body>
</html>

หน้านี้สร้างคอนเทนเนอร์ที่มีสามองค์ประกอบ อันดับแรก เรามีคำถามที่เรากำลังถามผู้ใช้ เรามีข้อความเกี่ยวกับวิธีการเปิดเผยคำตอบ หน้าของเราจบลงด้วยปุ่มสำหรับเปิดเผยคำตอบ

รหัสของเราส่งคืนเนื้อหาข้อความขององค์ประกอบของเรา:

JavaScript innerHTML และ innerText:A Guide

เราจะนำสไตล์ CSS ไปใช้ในไฟล์ styles.css เพื่อทำให้หน้าเว็บของเราสวยขึ้น:

<style>
.flashcard {
    margin: auto;
    width: 50%;
    padding: 50px;
    margin-top: 10%;
    background-color: lightgreen;
    text-align: center;
}

button {
    border: none;
    background-color: hotpink;
    padding: 10px;
    border-radius: 10px;
}
</style>

ทีนี้มาดูหน้าเว็บของเรากัน:

เว็บไซต์ของเราแสดงสิ่งที่ดูเหมือนแฟลชการ์ดมากกว่า เราได้ออกแบบปุ่มของเราแล้ว

เปลี่ยนข้อความโดยใช้ JavaScript innerHTML และ innerText

เราต้องการให้คำตอบของคำถามปรากฏเมื่อมีการคลิกปุ่ม อันดับแรก เราจะเลือกองค์ประกอบข้อความและปุ่มที่เราจะใช้ในโค้ด JavaScript ของเรา เราจะเขียนโค้ดทั้งหมดนี้ในไฟล์ scripts.js:

var answerText = document.querySelector('p');
var button = document.querySelector('button');

ต่อไป เราจะสร้างฟังก์ชัน JavaScript ฟังก์ชันนี้แสดงคำตอบสำหรับคำถามของเราเมื่อคลิกปุ่ม:

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
}

เพื่อเปิดใช้งานฟังก์ชั่นของเราด้วยการกดปุ่ม เราจะสร้างตัวฟังเหตุการณ์อย่างง่าย ผู้ฟังรายนี้ฟังการคลิกปุ่มของเรา:

button.addEventListener('click', showAnswer);

เราตั้งค่าแอพแฟลชการ์ดเสร็จแล้ว หากเราดูหน้าเว็บของเราและคลิกที่ปุ่ม "แสดงคำตอบ" ข้อความในย่อหน้าของเราจะเปลี่ยนเพื่อแสดงคำตอบ:

เราสามารถเพิ่มฟังก์ชันต่างๆ ให้กับแอปนี้ได้โดยใช้ JavaScript innerHTML . สมมติว่าเราต้องการให้แสดงข้อความที่ด้านล่างของแฟลชการ์ดเมื่อคลิกปุ่ม ข้อความนี้ควรปรากฏเป็นสีแดง เราสามารถสร้างข้อความนี้โดยใช้รหัสต่อไปนี้:

var message = document.querySelector('#showMessage');

function showAnswer() {
	answerText.innerText = "No. Hyperlinks can be used on both text and images.";
	message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>";
}

มาลองรันโค้ดของเราด้วย showAnswer() . ที่แก้ไขแล้ว ฟังก์ชันและตัวเลือกข้อความค้นหาใหม่ที่เราเขียน:

เราใช้ innerHTML วิธีการเพิ่มแท็ก HTML ในเว็บไซต์ของเรา แท็กนี้แสดงข้อความที่ปรากฏเป็นสีแดงเมื่อผู้ใช้กดปุ่มแสดงคำตอบ

JavaScript innerText กับ innerHTML

ทั้งคุณสมบัติ innerText และ innerHTML ช่วยให้คุณเข้าถึงและเปลี่ยนเนื้อหาของแท็กได้ innerText ส่งคืนข้อความโดยไม่มีการสืบทอดหรือการเว้นวรรค innerHTML ส่งคืนข้อความรวมถึงลูกหลานและการเว้นวรรค

คุณจะใช้ innerText หากคุณต้องการดูเนื้อหาขององค์ประกอบในข้อความธรรมดา การใช้ innerHTML จะเหมาะสมกว่าหากคุณต้องการดูแท็ก HTML ทั้งหมดที่ปรากฏในสตริง

โดยสรุป innerText ให้คุณทำงานกับข้อความธรรมดาได้ ในขณะที่ innerHTML ให้คุณทำงานกับ HTML ในสตริงได้

innerText และ innerHTML มีการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่

บทสรุป

ข้อความภายใน และ innerHTML คุณสมบัติจัดการ HTML DOM innerText แสดงผลเนื้อหาข้อความขององค์ประกอบใหม่โดยไม่มีการเว้นวรรคหรือการสืบทอด innerHTML ส่งกลับเนื้อหาขององค์ประกอบและการเว้นวรรคและลูกหลาน

เป็นโบนัสท้าทาย ดูว่าคุณสามารถสร้างโค้ดของเราด้านบนซ่อนคำตอบได้หรือไม่เมื่อคลิกปุ่มครั้งที่สอง รหัสของคุณควร:

ซ่อนคำตอบเมื่อผู้ใช้คลิกปุ่ม
เปลี่ยนข้อความของปุ่มจาก "แสดงคำตอบ" เป็น "ซ่อนคำตอบ" เมื่อคำตอบปรากฏขึ้น
เก็บข้อความ "คุณได้เปิดเผยคำตอบ" หลังจากที่ผู้ใช้กด "ซ่อนคำตอบ" แล้ว

หากคุณกำลังมองหาบทช่วยสอนเพิ่มเติมที่จะช่วยให้คุณเรียนรู้ JavaScript ดูบทแนะนำที่ดีที่สุดสำหรับคู่มือ JavaScript สำหรับผู้เริ่มต้น