添加HTML內(nèi)容和文本插入的方法

通常使用的innerHTML和innerText的方法進(jìn)行文件的插入,
javaScript還提供了inserAdjacentHTML和insertAdjacentText方法,可以是指定的位置插入HTML內(nèi)容和文本內(nèi)容;

insertAdjacentHTML(where, html/text) 具有三個(gè)參數(shù)

where:插入文本的位置,系統(tǒng)了提供了4個(gè)可選值

  • beforebgin : 元素自身的前面;
  • afterbegin : 插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn);
  • beforeend : 插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后;
  • afterend : 元素自身的后面
  • html/text : html文本/text文本
<!--html-->
<div id="test">
        <p> 原始文本</p>
</div>
<script>
    var oTest = document.getElementById("test")
          oTest.inserAjacentHTML("beforbgin", "<p>插入元素自身的前面</p>");
          oTest.inserAjacentHTML("afterbegin", "<p>插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)</p>");
          oTest.inserAjacentHTML("beforeend", "<p>插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后</p>");
          oTest.inserAjacentHTML("afterend", "<p>元素自身的后面</p>")
</script>

它不會(huì)重新解析它正在使用的元素,因此它不會(huì)破壞元素內(nèi)的現(xiàn)有元素。這避免了額外的序列化步驟,使其比直接innerHTML操作更快

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,675評(píng)論 0 44
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,168評(píng)論 1 92
  • 作者:周明耀原文地址:http://www.ibm.com/developerworks/cn/java/j-lo...
    IT程序獅閱讀 708評(píng)論 0 5
  • 作者/沛花仙子 上一篇《我和她之間,缺一場(chǎng)真正的風(fēng)花雪月》(三) 從小喜歡畫畫。 雖然沒有喜歡文字那么強(qiáng)烈,但也念...
    沐芷鯉閱讀 639評(píng)論 17 9
  • 去年十一月份,網(wǎng)上流行水培紅薯,說是冬天家里的一抹綠色,而且葉子能吃,各種營(yíng)養(yǎng)。 當(dāng)時(shí)心里羨慕,可手邊只有剛切菜剩...
    朱黛閱讀 200評(píng)論 0 0

友情鏈接更多精彩內(nèi)容