您的位置:首頁> 實例代碼> JS實例

insertAdjacentHTML() 與 innerHTML 相比優點

2019-11-6 15:14| 作者: admin| 查看: 1533| 評論: 0|來自: 螞蟻部落

秒速赛车打不开innerHTMLSHIDAJIASHUZHIDESHUXINGZHIYI,KEYIZHONGZHIHUOZHEFANHUIYUANSUNEIHTMLNEIRONG。

YOUYUMEIYOULIULANQIJIANRONGXINGWENTI,BINGQIESHIYONGFANGSHIJIANDAN,SUOYIYINGYONGFEICHANGPINFANQIEGUANGFAN。

關于它的具體用法可以參閱JavaScript innerHTML 屬性一章節。

秒速赛车打不开SHISHISHANG,ZAIMOUXIECHANGJINGXIA,SHIYONGinsertAdjacentHTML()FANGFAXIAOLVHUIGENGGAO。

秒速赛车打不开insertAdjacentHTML()FANGFAKEYIJIANGZIFUCHUANCANSHUZUOWEIHTMLHUOZHEXMLDAIMAJINXINGJIEXI。

然后將解析產生的節點插入到元素指定位置,具體參閱JavaScript insertAdjacentHTML()一章節。

一.insertAdjacentHTML()應用場景:

ZAIZHIDINGYUANSUNEIZHUIJIAHTMLNEIRONGSHI,TUIJIANSHIYONGinsertAdjacentHTML()FANGFA。

秒速赛车打不开DANGQIANSHIYONGinnerHTMLTONGYANGKEYISHIXIAN,KANRUXIADAIMASHILI:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://glbcf.cn/" />
<title>螞蟻部落</title> 
<style>
#box{
  width:150px;
  height:60px;
  border:1px dotted blue;
}
span{display:block;}
</style>  
<script>
window.onload = () => {
  let obox=document.getElementById("box");
  let obt=document.getElementById("bt");
  obt.onclick = () => {
    obox.innerHTML =obox.innerHTML + "<span>青島市南區</span>"
  }
}
</script>  
</head>
<body>
  <div id="box">
    <span>螞蟻部落</span>
  </div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>

DIANJIANNIUHOU,YUNXINGXIAOGUOJIETURUXIA:

a:3:{s:3:\"pic\";s:43:\"portal/201911/06/151623ku3t344k3isqdtzg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

DUISHANGSHUDAIMAFENXIRUXIA:

(1).MUDESHIZAIdivZHONGZAIZHUIJIAYIGE<span>YUANSU。

秒速赛车打不开(2).obox.innerHTMLKEYIFANHUIdivZHONGDEHTMLZIFUCHUAN。

(3).YEJIUSHIHUIDUIdivZHONGDEJIEDIANJINXINGXULIEHUA,RANHOUFANHUIHTMLZIFUCHUAN。

(4).SHANGSHUFANHUIDEHTMLZIFUCHUANZAIYU"<span>QINGDAOSHINANQU</span>"LIANJIEQILAI。

(5).RANHOUZAIFUZHIGEIinnerHTMLSHUXING,CISHUXINGHUIJIANGHTMLZIFUCHUANJIEXIWEIXIANGGUANJIEDIAN,RANHOUCHARUdivZHONG。

秒速赛车打不开SHANGSHUCHANGJINGTUIJIANSHIYONGinsertAdjacentHTML()FANGFASHIXIAN。

二.insertAdjacentHTML()優勢:

秒速赛车打不开SHOUXIANTONGGUOCIFANGFASHIXIANQIANMIANXIANGTONGDEXIAOGUO,DAIMASHILIRUXIA:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://glbcf.cn/" />
<title>螞蟻部落</title> 
<style>
#box{
  width:150px;
  height:60px;
  border:1px dotted blue;
}
span{display:block;}
</style>  
<script>
window.onload = () => {
  let obox=document.getElementById("box");
  let obt=document.getElementById("bt");
  obt.onclick = () => {
    obox.insertAdjacentHTML("beforeend","<span>青島市南區</span>");
  }
}
</script>  
</head>
<body>
  <div id="box">
    <span>螞蟻部落</span>
  </div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>

秒速赛车打不开DIANJIANNIUHOU,SHANGSHUDAIMATONGYANGKEYISHIXIANDIYIDUANDAIMAXIANGTONGDEXIAOGUO。

DANSHISHIYONGCIFANGFAXIAOLVHUIGENGGAO,BIRUTABUYONGZAIQUXULIEHUAdivZHONGDEJIEDIAN(YONGYIFANHUIHTMLZIFUCHUAN)。

TONGSHI,CIFANGFABUHUIDUIdivZHONGYIJINGCUNZAIDEYUANSUYOUBUBIYAODEGANRAO,JIASHEDIYIGE<span>ZHUCEYOUSHIJIANCHULIHANSHU。

秒速赛车打不开RUGUOSHIYONGinnerHTMLZHUIJIA,NEIMECISHIJIANCHULIHANSHUHUISHIXIAO,YINWEI<span>YUANSUSHIXINJIEXISHENGCHENGDE。

DAIMASHILIRUXIA:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://glbcf.cn/" />
<title>螞蟻部落</title> 
<style>
#box{
  width:150px;
  height:60px;
  border:1px dotted blue;
}
span{display:block;}
</style>  
<script>
window.onload = () => {
  let obox=document.getElementById("box");
  let ospan=document.getElementById("ant");
  let obt=document.getElementById("bt");

  ospan.onclick = () => {
    ospan.style.color="red";
  }
  obt.onclick = () => {
    obox.innerHTML =obox.innerHTML + "<span>青島市南區</span>"
  }
}
</script>  
</head>
<body>
  <div id="box">
    <span id="ant">螞蟻部落</span>
  </div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>

秒速赛车打不开DUISHANGSHUDAIMAJIANDANFENXIRUXIA:

秒速赛车打不开(1).WEIDIYIGEspanYUANSUZHUCEclickSHIJIANCHULIHANSHU,DIANJIHUIJIANGZITISHEWEIHONGSE。

(2).DIANJIANNIUZHUIJIAYIGEXINDE<span>YUANSU,NIHUIFAXIANSHIJIANCHULISHIXIAOLE。

RUGUOSHIYONGinsertAdjacentHTML()SHIXIANXIANGTONGDEXIAOGUO,ZEBUHUICHUXIANCIWENTI。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部