JavaScript after

Javascript இல் after() method ஒரு element க்கு அடுத்து புதிய ஒரு element ஐ சேர்பதற்கு பயன்படுகிறது.

Element.after(node)

Note: இங்கு after() method இல் புதியதாக create செய்யப்பட்ட node element ஆனது argument ஆக அனுபப்படுகிறது. இங்கு நாம் ஒரு element ஐ select செய்து கொண்டு Element.after(node) என call செய்யும் போது புதிய element ஆனது select செய்யப்பட்ட element உடன் சேர்ந்து கொள்ளும்.

Example1


<!DOCTYPE html>
<html>
<body>
            <h1 id="head">Programming In Tamil Youtube Channel</h1>
        <script>
                var para = document.createElement('p');
                para.innerText = "Parallel Codes";
                var res = document.getElementById('head');
                res.after(para);
        </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் document.createElement('p') என்ற முறையை பயன்படுத்தி ஒரு paragraph tag element create செய்யப்படுகிறது. பின்பு அதற்கு innerText value ஆக Parallel Codes என்ற value கொடுக்கப்படுகிறது. இங்கு முக்கியமாக document.getElementById('head') முறையை பயன்படுத்தி ஒரு header tag select செய்யப்படுகிறது. select செய்யப்பட்ட head tag அதாவது res.after(para) என கொடுக்கும் போது paragraph element ஆனது header tag க்கு அடுத்ததாக create செய்யப்படுகிறது.

Output: 

 
Programming In Tamil Youtube Channel

 
Parallel Codes

Example2


<!DOCTYPE html>
<html>
<body>
            <h1 id="head">Tamil Website To Learn Programming</h1>
        <script>
                var para = document.createElement('p');
                para.innerText = "Linto.in";
                var res = document.getElementById('head');
                res.after(para);
        </script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு முதலில் document.createElement('p') என்ற முறையை பயன்படுத்தி ஒரு paragraph tag element create செய்யப்படுகிறது. பின்பு அதற்கு innerText value ஆக Linto.in என்ற value கொடுக்கப்படுகிறது. இங்கு முக்கியமாக document.getElementById('head') முறையை பயன்படுத்தி ஒரு header tag select செய்யப்படுகிறது. select செய்யப்பட்ட head tag அதாவது res.after(para) என கொடுக்கும் போது paragraph element ஆனது header tag க்கு அடுத்ததாக create செய்யப்படுகிறது.

Output: 


Tamil Website To Learn Programming


Linto.in

Comments