insertBefore()方法,


</head>
<body>
insertBefore()方法,这个方法将把 一个新元素插入到一个现有元素的前面。在调用此方法时,必须告诉它三件事:
1.想插入的新元素(newElement).
2.想把这个新元素插入到哪个现有元素(targetElement)的前面。
3.这两个共同的父元素(parentElement);


下面是这个方法的调用语法:
parentElement.insertBefore( newElement , targetElement)//两个参数

下面这个函数将用到以下DOM方法和属性:
parentNode属性//父亲节点
lastChild属性//最后一个子元素

appendChild()方法//紧跟后面添加子元素 语法: appendChild(newElement)


inserBefore()方法//前面插入
nextSibling属性//下一个兄弟


 <script>

    // 利用现有的DOM方法和属性把一个节点插入到另一个节点的后面

   // 这个函数两个参数,一个是将被插入的新元素,另一个是新元素将被插入到它前面去的目标元素。这两个参数通过变量newElement和targeElement传递到这个函数里 :          

                  function insertAfter(newElement , targeElement) {

                    var parent = targeElement.parentNode;    //把目标元素的parentNode属性值提取到变量parent里.

                    // 检查目标元素是不是parent的最后一个子元素,是否存在“等于”关系 :

                                if (parent.lastChild == targeElement) {  

      // 是等于就用appendChild()方法把新元素追加到parent的最后一个子元素上,这样就恰好把新元素紧跟着插入到目标元素的后面了 :                    parent.appendChild(newElement);

                           }else {// 如果父元素最后一个子元素不是目标元素,就执行下面这行代码 :

            parent.insertBefore(newElement , targeElement.nextSibling);

//用insertBefore()方法把 新元素插入到目标元素的下一个兄弟元素前面
,目标元素的下一个兄弟元素的前面,也就是目标元素的后面

}
}
</script>
</body>
</html>
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Plus 的树形控件支持使用 `insertBefore` 方法增加节点,这需要使用到树形控件的 API。同时,如果需要调用后端接口来获取数据,可以使用 axios 发送 POST 请求,获取数据后再通过 API 添加节点。 以下是一个示例代码,用于使用 axios 发送 POST 请求,获取数据并使用 `insertBefore` 方法添加节点到树形控件中: ```html <template> <el-tree :data="treeData" ref="tree" :expand-on-click-node="false"> <template v-slot="{ node, data }"> <span>{{ data.label }}</span> <el-button @click="addChild(node)">添加子节点</el-button> </template> </el-tree> </template> <script> import axios from 'axios'; export default { data() { return { treeData: [], }; }, methods: { addChild(node) { // 发送 POST 请求获取子节点数据 axios.post('/api/getChildren', { parentId: node.id }) .then(response => { // 将子节点添加到当前节点前面 response.data.forEach(child => { this.$refs.tree.insertBefore({ data: child, node: node, }); }); }) .catch(error => { console.error(error); }); }, }, mounted() { // 初始化树形控件数据 axios.get('/api/getTreeData') .then(response => { this.treeData = response.data; }) .catch(error => { console.error(error); }); }, }; </script> ``` 在上面的代码中,我们定义了一个 `addChild` 方法,用于添加子节点。当用户点击添加子节点按钮时,会发送 POST 请求到 `/api/getChildren` 接口,获取子节点数据。然后,我们将每个子节点使用 `insertBefore` 方法添加到当前节点前面。其中,`node` 表示当前节点的数据,`$refs.tree` 是树形控件的引用。 在 `mounted` 生命周期钩子函数中,我们使用 axios 发送 GET 请求,获取树形控件的初始化数据,并将其赋值给 `treeData`。然后,在模板中使用 `v-for` 指令渲染树形控件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值