First, we have an editor that has a simple HTML page with the level of the page--the HTML-->head[title,meta,script,link]--Body, Then create a new Index.js page that specifically writes JavaScript code. Build a Style.css page back.
HTML page
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" /> <title>Dom</title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/style.css" /> <Scriptsrc= "Js/demo.js"></Script></Head><Body> <Divclass= "Main"ID= "Main"> <Center> <DivID= "Test"></Div> </Center> </Div></Body></HTML>View Code
CSS Page
html, body, Div, span, applet, object, IFRAME, H1, H2, H3, H4, H5, H6, p, blockquote, Pre, A, ABBR, acronym, address, Big, cite, code, Del, DFN, EM, img, INS, KBD, Q, S, Samp, small, strike, strong, sub, SUP, TT, VAR, b, U, I, center, DL, D T, DD, OL, UL, Li, FieldSet, form, label, legend, table, Caption, Tbody, TFOOT, THEAD, tr, TH, TD, Article, aside, canvas, Details, embed, figure, figcaption, footer, headers, Hgroup, menu, nav, output, ruby, section, Summary, time, mark, audio, Video{margin:0;padding:0;Border:0;font-size:100%;Font:"Microsoft Himalaya";vertical-align:Baseline;}Body{font-size:1.025rem;}/*fixed CSS style--Top code*/. Main{position:Absolute;Top:0;Bottom:0; Left:0; Right:0;Background-color:#b9b7b7;}. Main center{position:Absolute;Top:2%;Bottom:2%; Left:1%; Right:1%;Background-color:#ffffff;Border-radius:12px;}. Main center Div#test{position:relative;margin:1% Auto;padding:6px 0px;background:Rgba (242, 248, 248, 0.93);Border:1px solid Rgba (241, 242, 243, 0.95);Box-shadow:2px 0px 2px #ffffff;}CSS
jav Ascript page
function Div () { var test = document.getElementById ("Test" ); var p = document.createelement ("p" ); var i = document.createelement ("i" ); var Text = "This is JavaScript" var here = document.createTextNode (text ); I.appendchild (here); P.appendchild (i); // within P Test.appendchild (p); // } within the Div At this point, in the Web browser to see the information displayed on the page, this isjavascript English text oblique expression with the <i> tag.
In the HTML page, we just create a new ID in the body of the Div block, and then, in JavaScript through getElementById (ID) to get the page ID, followed by appendchild to the node to add child nodes, so step by step, Without an accident, we can achieve what we want.
Not yet, we didn't say how to load the JS function on the page, so add a line of code after the function div () {} on the JavaScript page. Window.onload=div;
Write here, also took care of, of course, these are the basis, if the content has a problem, I hope you put forward to avoid misleading others to learn, I hope we grow with each other. ^_^
JavaScript (appendchild add node)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
