欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript缺少insertAfter解決方案

 更新時(shí)間：2020年07月03日 14:43:03   作者：奔跑的太陽(yáng)花  
這篇文章主要介紹了JavaScript缺少insertAfter解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

在現(xiàn)有的方法后插入一個(gè)新元素，你可能會(huì)想：既然有insertBefore方法，是不是也有一個(gè)相應(yīng)的insertAfter()方法。很可惜，DOM沒(méi)有提供方法。

下面編寫(xiě)insertAfter函數(shù)，雖然DOM本身沒(méi)有提供，但它確實(shí)提供了一個(gè)把一個(gè)節(jié)點(diǎn)插入到另一個(gè)節(jié)點(diǎn)之后所有工具。我們完全可以利用已有的DOM方法和屬性編寫(xiě)一個(gè)insertAfter函數(shù)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

在現(xiàn)有的方法后插入一個(gè)新元素，你可能會(huì)想：既然有insertBefore方法，是不是也有一個(gè)相應(yīng)的insertAfter()方法。很可惜，DOM沒(méi)有提供方法。下面編寫(xiě)insertAfter函數(shù)，雖然DOM本身沒(méi)有提供，但它確實(shí)提供了一個(gè)把一個(gè)節(jié)點(diǎn)插入到另一個(gè)節(jié)點(diǎn)之后所有工具。我們完全可以利用已有的DOM方法和屬性編寫(xiě)一個(gè)insertAfter函數(shù)：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<script>
  function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
      parent.appendChild(newElement);
    }else{
      parent.insertBefore(newElement,targetElement.nextSibling);
    }
  }
  var p = document.createElement('p');
  var txt = document.createTextNode('我是新插入的節(jié)點(diǎn)');
  p.appendChild(txt);


  var lis = document.getElementsByTagName('li');

  //insertAfter(p,lis[0])
</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 禁止彈窗中蒙層底部頁(yè)面跟隨滾動(dòng)的幾種方法

    禁止彈窗中蒙層底部頁(yè)面跟隨滾動(dòng)的幾種方法

    我們大家在做彈出層的時(shí)候，必不可少的一個(gè)元素就是蒙層，也就是遮罩層，當(dāng)彈出層滾動(dòng)的時(shí)候，蒙層底部的頁(yè)面一般是要求固定不動(dòng)的，所以這篇文章就來(lái)給大家介紹了如何禁止彈窗中蒙層底部頁(yè)面跟隨滾動(dòng)的幾種方法，需要的朋友可以參考下。
    2017-12-12
  • jQuery實(shí)現(xiàn)仿百度首頁(yè)滑動(dòng)伸縮展開(kāi)的添加服務(wù)效果代碼

    jQuery實(shí)現(xiàn)仿百度首頁(yè)滑動(dòng)伸縮展開(kāi)的添加服務(wù)效果代碼

    這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度首頁(yè)滑動(dòng)伸縮展開(kāi)的添加服務(wù)效果代碼,通過(guò)jQuery相應(yīng)鼠標(biāo)事件控制頁(yè)面元素的動(dòng)態(tài)變換功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-09-09
  • JS中Select下拉列表類(lèi)(支持輸入模糊查詢(xún))功能

    JS中Select下拉列表類(lèi)(支持輸入模糊查詢(xún))功能

    這篇文章主要介紹了JS中Select下拉列表類(lèi)(支持輸入模糊查詢(xún))功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
    2017-01-01
  • javascript cookie操作類(lèi)的實(shí)現(xiàn)代碼小結(jié)附使用方法

    javascript cookie操作類(lèi)的實(shí)現(xiàn)代碼小結(jié)附使用方法

    javascript cookie操作類(lèi)的實(shí)現(xiàn)代碼小結(jié)附使用方法，對(duì)于cookies操作不是很熟悉的朋友可以參考下。
    2010-06-06
  • 詳解如何webpack使用DllPlugin

    詳解如何webpack使用DllPlugin

    這篇文章主要介紹了詳解如何webpack使用DllPlugin，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • 詳解nuxt 微信公眾號(hào)支付遇到的問(wèn)題與解決

    詳解nuxt 微信公眾號(hào)支付遇到的問(wèn)題與解決

    這篇文章主要介紹了詳解nuxt 微信公眾號(hào)支付遇到的問(wèn)題與解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 如何讓div span等元素能響應(yīng)鍵盤(pán)事件操作指南

    如何讓div span等元素能響應(yīng)鍵盤(pán)事件操作指南

    在我這幾天的工作中遇到了一個(gè)問(wèn)題，我有一個(gè)可編輯的div，并且在DIV里面還有一個(gè)可編輯的span，我想要讓span能響應(yīng)鍵盤(pán)事，想實(shí)現(xiàn)這種效果，應(yīng)該如何實(shí)踐呢
    2012-11-11
  • web網(wǎng)頁(yè)按比例顯示圖片實(shí)現(xiàn)原理及js代碼

    web網(wǎng)頁(yè)按比例顯示圖片實(shí)現(xiàn)原理及js代碼

    由于上傳圖片的大小是未知的，在顯示成縮略圖的時(shí)候必須進(jìn)行按比例的縮放才能美觀地顯示，本文將為大家簡(jiǎn)單的介紹一種比較不錯(cuò)的方法，有此需求的朋友可以參考下
    2013-08-08
  • JavaScript中的prototype使用說(shuō)明

    JavaScript中的prototype使用說(shuō)明

    在JavaScript中并沒(méi)有類(lèi)的概念，但JavaScript中的確可以實(shí)現(xiàn)重載，多態(tài)，繼承。這些實(shí)現(xiàn)其實(shí)方法都可以用JavaScript中的引用和變量作用域結(jié)合prototype來(lái)解釋。
    2010-04-04
  • JavaScript實(shí)現(xiàn)tab欄切換的效果

    JavaScript實(shí)現(xiàn)tab欄切換的效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)tab欄切換的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-09-09

最新評(píng)論