I still like to read the code, see ...
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>InnerHTML InnerText outerHTML's practice</title> <style>Div{margin:20px Auto;width:200px;Height:200px;Background-color:Pink; }#test02{Background-color:Green; } </style></Head><Body> <DivID= "test01"></Div> <DivID= "test02">Sfda</Div> <Script> varT1=document.getElementById ("test01"); varT2=document.getElementById ("test02"); T1.innerhtml= "<a href= ' # ' >test01</a>"; //the A tag inside the t1.innerhtml has HTML attributesT2.innertext= "<a href= ' # ' >test02</a>"; //the A tag inside the t2.innertext will be treated as plain text.t2.outerhtml= "<div><a href= ' # ' >outerHTML</a></div>"; //t2.outerhtml will replace all content including <div id= "test02" ></div> /*In summary*/ /*One: Get tag internal text does not contain HTML tags: innerText: Get all the content inside the tag including HTML, but not the label itself: InnerHTML (remember that four HTML is uppercase) Three: Get all the HTML content including the tag element.outerhtml; */ </Script></Body></HTML>
View Code
JS in the innerHTML, InnerText, outerhtml content code detailed