zoukankan      html  css  js  c++  java
  • insertAdjacentHTML方法详解

    添加HTML内容与文本内容以前用的是innerHTML与innerText方法,

    最近发现还有insertAdjacentHTML和 insertAdjacentText方法,

    这两个方法更灵活,可以在指定的地方插入html内容和文本内容。

    insertAdjacentText方法与 insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同

    方法名称:insertHtml(where,el,html)

    参数介绍:
    where:插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
    el:用于参照插入位置的html元素对象
    html:要插入的html代码



    insertAdjacentHTML 方法:在指定的地方插入html标签语句

    原型:insertAdajcentHTML(swhere,stext)


    参数:

    swhere: 指定插入html标签语句的地方,

    stext:要插入的内容


    有四种值可用:

    1.     beforeBegin: 插入到标签开始前

    2.     afterBegin:插入到标签开始标记之后

    3.     beforeEnd:插入到标签结束标记前

    4.     afterEnd:插入到标签结束标记后

    例如:

    <html>  
             <head>  
             <mce:script language="<a href="http://lib.csdn.net/base/18" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>">

    <!--  
             function myfun(){  
                 var obj = document.getElementById("btn1");  
                 obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");  
             } 
    -->
             </mce:script>  
             </head>  
             <body>  
                    <input name="txt">  
                    <input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">  
             </body>  
    </html>

    <html>  
     <head>  
     <title>html insertAdjacentHTML插入新内容</title>  
     <mce:script language="jscript">
     <!--  
     function addsome()  
     {  
         document.all.paral.insertAdjacentHTML("afterBegin","<h1> 在文本前容器内插入内容1</h1>");  
         document.all.paral.insertAdjacentHTML("beforeEnd","<h2> 在文本后容器内插入内容2</h2>");  
         document.all.paral.insertAdjacentHTML("beforeBegin","<h4> 在文本前容器外插入内容4</h1>");  
         document.all.paral.insertAdjacentHTML("afterEnd","<h5> 在文本后容器外插入内容5</h2>");  
     }     
    --></mce:script>  
     </head>  
     <body onload="addsome()">  
     <div id="paral" style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>  
     </body>  
     </html>

    <mce:script language="jscript"></mce:script>标签

    Tiny MCE生成的
    目的是防止javascript嵌入攻击。

    这个标签可以用js的标签代替。

  • 相关阅读:
    CentOS7搭建FTP服务器和安装FTP客户端
    Python实现网络和IP地址计算
    [Leetcode Weekly Contest]270
    [Leetcode Weekly Contest]269
    [Leetcode Weekly Contest]266
    Vue.use原理及源码解读
    Rust 程序设计语言 6
    go 语言的 Context
    Rust程序设计语言(7)
    手机界面设计中12种常用布局转载
  • 原文地址:https://www.cnblogs.com/happiness-mumu/p/6050759.html
Copyright © 2011-2022 走看看