g.parentNode.insertBefore(c, g.nextSibling)
**作用:将拼接的错误提示span元素,插入到要验证的表单元素的nextSibling(返回位于相同节点树层级的下一个节点),即相邻位置;
**分析:
01 g为要验证的表单元素input name="user_subscribed_email"
02 g.parentNode为返回元素的父节点,即input的父节点div class='input-control
03 c为拼接的错误提示span元素
04 g.nextSibling为要验证的表单元素的相邻位置
05 insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
**作用:将拼接的错误提示span元素,插入到要验证的表单元素的父节点的相邻位置;
**分析:
01 g为要验证的表单元素input name="user_subscribed_email"
02 g.parentNode.parentNode为元素的父节点的父节点,
即input的父节点div class='input-control的父节点div class='form-row'
03 c为拼接的错误提示span元素
04 g.parentNode[1] 验证的表单元素的父节点的父节点的第二个元素位置
05 insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
g.parentNode.parentNode.insertBefore(c, g.parentNode[1])
g.parentNode.parentNode 为错误信息c要插入哪个元素中
c为要插入的错误元素
g.parentNode[1] 为要插入的位置,这里插入在div class='form-row'的第二个元素的前面,
即验证的表单元素的父节点的后面,即可达到想要的效果。
HTML DOM insertBefore() 方法
****** insertBefore示例 *****
nextSibling parentNode和insertBefore的参考:
HTML DOM Element 对象
var node = parentNode.insertBefore(node, referenceNode)
作用:将node节点插入到referenceNode节点之前,parentNode为对应的父节点。返回值node是插入的node节点本身。
插入新节点
HTML代码
<div id="container">
<h1>标题1</h1>...
document.body.insertBefore(rightPanel);
这行代码是为了给Html中增加一个div写的,奇怪的是这行代码在Android5.0以下的版本中跑起来居然没问题,在Android5.0以上的版本中,这段代码是不成功的。
Android...
inserBefore,顾名思义就知道是“在某个节点之前插入”。而MDN文档的说法是:
Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点
而所谓的“拥有指定父节点”,就是指被参照的节点的父节点就是调用insertBefore方法的节点。
如果给定的子节点是对文档中现有节点的引用,insertBefore()会将其从当...
<flow-area v-for="area in data.areaList" @delete-area="deleteArea" :isconnect="isConnect" @change-area="changeArea":id="area.id" :key="area.id" :node="area"></flow-area>
<flow-node v-for.
语法:父节点.insertBefore('插入的子节点','指定原有子节点')
由于是在指定的原有子节点前插入新的子节点,因此这个方法的调用者必须是一个父节点,因为所谓“原有的子节点”必须是相对父节点来说。如:
<ul class="web-nav" id='gw'> <!-- 父节点 -->
<li><a href="#">公司官网</a></li> <!-- 子节点
在上述例子中,先创建一个新的元素节点,再创建一个文本节点,将文本节点添加到创建的元素节点中,通过getElementById获取ul对象,
将新建节点插入到ul对象的第三个元素之前。
注意:ul列表之所以横着写,中间不留空格是因为insert
解决Vue报错:[Vue warn]: Error in nextTick: “NotFoundError: Failed to
execute ‘insertBefore’ on ‘Node’: The node before which the new node
is to be inserted is not a child of this node.”
一、问题产生原因
因为是在template 包裹的最外层div 上使用了v-if、当不渲染时、不符合VUE语法。
<template>.