怎么运用js或jquery,在已经获取父节点的情况下可以多次增加该节点的子节点

怎么运用js或jquery,在已经获取父节点的情况下可以多次增加该节点的子节点,第1张

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>乱伏

var para=document.createElement("p")

var node=document.createTextNode("这是一个新段落。")

para.appendChild(node)

var element=document.getElementById("div1")

element.appendChild(para)

</script>

这段代码创建新的<p> 元素

var para=document.createElement("p")

如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:

var node=document.createTextNode("这是一个纯渗新段落。")

然后您必须向 <p> 元素追加这个文本节点:

para.appendChild(node)

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素:

var element=document.getElementById("做陪脊div1")

以下代码在已存在的元素后添加新元素:

element.appendChild(para)

在获取到父节点的情况下 var parentNode =...

多次执行parentNode.appendChild(已经创建好的子节点)即可多次添加子节点

var oLis = document.getElementsByClassName("dad")[0].getElementsByTagName("li")

for(var i = 3i<oLis.lengthi++){

oLis[i].style.backgroundColor = "red"

}

这个是原生js写的中悄,因为用的getElementsByClassName有兼卖薯渣容性问题,我就不写解决的函数了

$(function(){

 $(".dad").find("li").slice(3).css("backgroundColor","red")

})

这个是手没用JQ写的

这两个你要哪个拿哪个,不懂追问,反正这是小问题,满意劳烦采纳,实在需要原声兼容我补充给你

//1、首先获取div的父节点

//2、创建一个新节点

//3、将新节点添加到div节点后面

//具体 *** 作如下:

var divs = document.getElementsByTagName("DIV")//获取页面中所有div

for(var i=0 i<divs.length i++) {  

    var div = divs[i]//获取第i个div

    var divParent = div.parentNode//获取该div的父节点

    var newNode = document.createTextNode("文本节点")//创建文本节点

    var next = div.nextSibling//获取div的下一个兄弟节点

    //判断兄弟节点是否存在

    if(next) {

        //存在则将新节点插入到div的下一个兄弟节点之前,即div之后

        divParent.insertBefore(newNode,next)

    } else {

        //不存在则直接添加到最后,appendChild默认添加到divParent的最后

        divParent.appendChild(newNode)

    }

}

//以下是一些常用js *** 作

var textNode = document.createTextNode("xxx")//创建文本节点

var elementNode = 谨弊document.createElement("p")//创建元素节点(p)

var body = document.getElementsByTagName("body")[0]//获慧喊取body节点

body.appendChild(elementNode)//元素前晌野节点添加到body节点下,添加在末尾

elementNode.appendChild(textNode)//将文件节点添加到元素节点下

//获取要删除的节点,elementNode.length-1 表示最后一个指定节点(这里表示最后一个p节点)

var delElementNode = elementNode.item(elementNode.length-1)

body.removeChild(delElementNode);//移除指定节点

body.insertBefore(newNode, oldNode)//在body中的oldNode前插入newNode节点

body.replaceChild(newNode, oldNode)//将body中的oldNode替换为newNode节点

//创建一个新的属性

var style = document.createAttribute("style")

//为节点添加新属性

option.attributes.setNamedItem(style)

//设置新属性的值

option.setAttribute("style","color:red")


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11977787.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存