innerHTML
is a JavaScript property that can be used to get the HTML content added into a HTML element in web page, and also it can be used to replace the content into a HTML element with other content.
innerHTML
:
<div id='id1'>JavaScript <p>Example innerHTML - https://coursesweb.net/javascript/</p> </div> <p>If you click on the following button, it adds in textarea the content of the HTML element with id 'id1'.</p> <button id='btn1'>Try it</button><br> <textarea id='txta' cols='40' rows=4'></textarea> <script> var txta = document.getElementById('txta'); document.getElementById('btn1').addEventListener('click', (ev)=>{ var cnt = document.getElementById('id1').innerHTML; txta.value = cnt; }); </script>
innerHTML
:
<div id='id1'>Div - JavaScript</div> <p>If you click on the following button, it replaces the content of the Div above.</p> <button id='btn1'>Try it</button> <script> document.getElementById('btn1').addEventListener('click', (ev)=>{ document.getElementById('id1').innerHTML ='<p>Example innerHTML - https://coursesweb.net/javascript</p>'; }); </script>
outerHTML
is a JavaScript property that can be used to get the string with a HTML element, including its tag, attributes and child elements, also it can replace a HTML tag (including its content) with other HTML content.
outerHTML
:
The difference between innerHTML
and outerHTML
is that the innerHTML
gets the content added into a HTML element, but the outerHTML
gets also the tag and attributes representing that element.
<div id='id1'>JavaScript <p>Example outerHTML - CoursesWeb.net/javascript</p> </div> <p>If you click on the following button, it adds in textarea the HTML element with id 'id1'.</p> <button id='btn1'>Try it</button><br> <textarea id='txta' cols='40' rows=4'></textarea> <script> var txta = document.getElementById('txta'); document.getElementById('btn1').addEventListener('click', (ev)=>{ var cnt = document.getElementById('id1').outerHTML; txta.value = cnt; }); </script>
outerHTML
:
The difference between outerHTML
and innerHTML
is that outerHTML
replace the element itself with the new content.
<div id='id1'>Div <div id='id2'>JavaScript</div> </div> <p>If you click on the following button, it replaces the the Div above with a H4 element.</p> <button id='btn1'>Try it</button> <script> document.getElementById('btn1').addEventListener('click', (ev)=>{ document.getElementById('id1').outerHTML ='<h4>Example outerHTML - https://coursesweb.net/javascript</h4>'; }); </script>
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
h2 { font-family:"Calibri",sans-serif; }
var elm_list = document.querySelectorAll("div.cls"); var nr_elms = elm_list.length; // number of selected items alert(nr_elms);
$arr =[1, 2, 3, 4); $arr_sum = array_sum($arr); echo $arr_sum; // 10