How to insert HTML content and text content at a specified location

Source: Internet
Author: User
Tags readable

  This article introduces a tip for you to insert HTML content and text content in the specified place, as shown below, interested friends can refer to the following

DHTML provides two ways to add, insertadjacenthtml and insertadjacenttext  insertadjacenthtml methods: Inserts an HTML tag statement at a specified location.   Prototype: insertadjacenthtml (swhere,stext)   Parameters:  Swhere: Specify where HTML tag statements are inserted, four values can be:  1.beforeBegin: Insert before label start   2.afterBegin: Insert to label start tag   3.beforeEnd: Insert to tag end tag   4.afterEnd: Insert to tag end tag   Stext: What to insert   Example:    code is as follows: Var shtml= "<input Type=button go2 ()" + "value= ' click Me ' ><BR>"   var sscript= ' <script defer> '   sscript = sscript + ' function go2 () {alert ("Hello from inserted SCRIPT.")} '   Sscript = sscript + ' </script ' + ' > ';  scriptdiv.insertadjacenthtml ("Afterbegin", SHTML + sscript); nbsp   Add a line to the HTML body:  <div id= "Scriptdiv" ></Div>  eventually becomes:    code as follows: <div id= "Scriptdiv ">  <input Type=button onclick=go2 () value= ' click Me ' ><BR>  <script defer>  function Go2 () {alert ("Hello from inserted Sctipt.")} '   </script>  </div>&nbsp The   insertAdjacentText method is similar to the insertAdjacentHTML method, except that only plain text can be inserted, the parameters are the same     These two properties are more applicable, especially in the drawing and other places used more, Its advantage is not to overwrite the original content, let's assume that there is a div, it has content, and now we have to add content dynamically, and can not cover the original content, then this time this thing is very important, innerHTML will be covered with the original things.   All pairs appear HTML can use this attribute, this is the same as innerHTML, such as <body> </body>, <div>....</div> and all of these have these two attributes     add: Just now I tried, innerhtml this attribute is readable and writable, I used to know that innerHTML can insert content into a node, but this property is readable, which means that the HTML content of the node is stored in the innerHTML, and the following code is fully understood:    code is as follows: <html>   <head>  <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">  <title> Untitled document </title>  </head>  <body>  Safdsdaf on Time Place   <script language= "javascript" >  alert (document.body.innerText)   </script>   </body>  </html>    above is I reprint to someone else's code, below I add a few lines of code, also very classic have, perhaps you use the:    code as follows: < Script language= "javascript" type= "Text/javascript" >  function AddFile ()   {  var FilebuTton = ' <br><input type= ' file ' size= ' name= ' file '/> ';  document.getelementbyidx (' filelist '). insertAdjacentHTML ("BeforeEnd", Filebutton); }  </script>    Above is the script inside the head, Below is the body inside: HTML code:    code as follows: <p id= "filelist" >  <input type= "file" runat= "server" size= "name" = "File"/>  </p>    You will know the effect by copying the code into a file and saving it as an HTML.    
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.