`

在目标元素之后添加元素

    博客分类:
  • JS
 
阅读更多
  1. // DOM没有提供insertAfter()方法,所以我们只能自己写一个。   
  2. function insertAfter(newElement,targetElement) {   
  3.   var parent = targetElement.parentNode;   
  4.   if (parent.lastChild == targetElement) {   
  5. // 如果最后的节点是目标元素,则直接添加。因为默认是最后   
  6.   parent.appendChild(newElement);   
  7.   } else {   
  8.   parent.insertBefore(newElement,targetElement.nextSibling);   
  9. //如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。   
  10.   }   
  11. }  
分享到:
评论

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    6. 动态添加元素到页面中:在需要的时候,使用jQuery的`.append()`方法将创建好的select元素添加到页面的指定容器中。这个操作会把新的HTML字符串插入到页面的DOM中,从而使得select元素变得可用。 7. 绑定事件到...

    向元素中动态添加option

    接下来,要将这个新创建的`<option>`元素添加到`<select>`元素中,我们需要找到目标`<select>`元素,这通常通过其`id`属性完成,例如:`var selectElement = document.getElementById('selectId')`。之后,使用`....

    读Ext之十二(在各个位置插入元素)

    2. `insertBefore`和`insertAfter`:这两个方法分别用于在指定元素之前或之后插入新元素。它们都需要两个参数,第一个是目标元素,第二个是新元素的配置对象或者已创建的DOM元素。 3. `insertFirst`:此方法用于在...

    关于块级元素和行内元素

    例如,在一个标题中,我们可以使用 h4 元素来控制标题的显示,然后使用 a 元素来添加链接。 块级元素和行内元素在 CSS 中的应用 在 CSS 中,我们可以通过设置 display 属性来控制元素的显示方式。例如,我们可以将...

    javaScript动态添加Li元素的实例

    在这个示例中,通过获取ul元素(其id为“J_List”)的innerHTML属性,并在其末尾添加新的li元素的HTML代码,从而实现动态添加元素的功能。在创建新li元素时,使用了HTML转义字符来处理包含双引号的字符串,这样做是...

    vue拖动实现布局,添加元素,拖拽元素,设置文本大小

    通过在 `dragover` 和 `dragenter` 事件中检查鼠标位置和目标元素的位置,可以限制拖动方向。例如,如果只允许水平拖动,你可以阻止 `dragover` 和 `dragenter` 事件的默认行为,当鼠标垂直坐标超出一定范围时。 5...

    微量元素添加剂生产与质量控制.pptx

    同时,还需制定科学的饲料配方和使用指南,结合动物的生理状态和生产目标,合理选择和使用微量元素添加剂,以减少对环境的不良影响,确保食品安全,并提高畜牧业的经济效益。 综上所述,微量元素添加剂的生产与质量...

    CSS设置元素width=100%失效的一种解决方式(该元素的父元素为body).pdf

    将这个值转换为字符串并添加单位('px')后,直接赋值给目标元素的`style.width`,从而实现动态设置宽度的效果。 此外,为了避免在不同设备和屏幕尺寸下出现问题,可以考虑使用媒体查询(Media Queries)配合CSS,...

    jQuery如何获取动态添加的元素

    这个方法的优点在于,它将事件监听器绑定到一个父元素上,而不是直接绑定在目标元素上。当动态添加元素到DOM中时,这些元素会继承父元素上的事件监听器。 例如,假设有一个段落标签,我们希望通过点击任何新增的...

    jQuery实现在新增加的元素上添加事件方法案例分析

    这样即使子元素是在事件监听器设置之后添加到DOM中的,也依然能够触发事件。 为了提高对动态元素事件处理的性能,通常建议将事件监听器绑定在最近的静态父元素上。由于静态元素不会因为DOM操作而重新创建,所以这样...

    mucus:使用 MutationObservers 监视正在添加或删除的子元素的目标元素

    粘液Mucus 是一个包,可以使用 MutationObservers 监视目标元素是否添加或删除子元素。 只是让它使用起来更干净(具有讽刺意味),无论如何,他的想法是 NodeLists ......参考mucus(target, listener) => fn 侦听...

    jQuery CSS3动画创建元素列表项添加删除代码

    例如,添加元素时,可以使用`slideDown()`或`fadeIn()`方法,让新元素以滑动或淡入的方式出现;删除元素时,可以使用`slideUp()`或`fadeOut()`方法,使元素以滑出或淡出的方式消失。 下面是一个简单的示例代码: `...

    jQuery使用prepend()方法在元素前添加内容用法实例

    使用prepend()方法时,可以插入一个或多个元素到目标元素的最前面,也可以是连续多次插入,它会按照从右到左的顺序依次插入到每一个匹配的元素中。 通过给出的示例代码,我们可以看到具体的使用场景和效果。在这段...

    MoveElementJS给指定HTML元素添加移动拖拽功能

    在JavaScript开发中,有时我们需要为HTML元素添加交互性,使其可以被用户拖动,以便增强用户体验。MoveElementJS是一个小型库,专门用于实现这个功能。它允许开发者轻松地赋予任何HTML元素拖拽的能力,使用户可以...

    Activity之间以及fragment之间跳转 共享元素动画实现

    最后,为了在回退栈中正确处理动画,我们需要在AndroidManifest.xml中对目标Activity添加android:allowEmbedded="true"属性,以允许其在另一个Activity中作为Fragment嵌入。 通过以上步骤,我们就可以在Activity和...

    已知有两个按元素值递增有序的顺序表A和B,设计一个算法将表A和表B的全部元素归并为一个按元素值递增有序的顺序表C。

    给定两个递增有序的顺序表A和B,我们的目标是将这两个表中的所有元素合并成一个新的递增有序的顺序表C。为了实现这一目标,我们可以采用如下的算法思路: 1. **初始化**:首先,我们需要创建一个新的顺序表C,并且...

    JQuery拖放,拖拽到指定的位置,拖拽元素,鼠标拖动

    - `hoverClass`: 当拖动元素悬停在上面时,添加到目标元素的CSS类名。 要实现"拖拽元素到指定的对应位置",我们需要在`.droppable()`的`drop`回调函数中处理逻辑。当拖动元素被释放时,可以根据需要调整其位置,...

    可使任何HTML元素动态缩放适合父元素的js插件

    2. 在文档加载完成后,应用`scalable.js`到目标元素: ```javascript $(document).ready(function() { $('.your-element-class').scalable(); }); ``` 这里,`.your-element-class`是你要应用动态缩放效果的HTML...

    javascript实现的动态添加表单元素input,button等(appendChild)

    然后,我们可以使用`appendChild`方法将新创建的元素添加到已存在的DOM节点的子元素列表中。假设我们有一个ID为`add`的`div`元素,我们可以这样操作: ```javascript var TemO = document.getElementById("add"); ...

Global site tag (gtag.js) - Google Analytics