在指定元素前/后添加元素结点/只删除元素结点中的文本内容不会删除子节点(js/jQuery实现)
Posted 黎大学问
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在指定元素前/后添加元素结点/只删除元素结点中的文本内容不会删除子节点(js/jQuery实现)相关的知识，希望对你有一定的参考价值。
问题描述：
改变2022-06-07的css样式
例如：margin-left之类
-
<li class="news-con-li"> <img src="" /> <a ></a> 2022-06-07 <img src="" /> </li>
解决思路： -
将文本内容2022-06-07变为
<li class="news-con-li"> <img src="" /> <a></a> <span id="time">2022-06-07</span> <img src="" /> </li> - 然后修改样式
难点：
- 在指定元素前/后添加dom结点
-
只删除dom结点中的文本内容，不会删除子节点
代码实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="./jquery-3.4.1.js"></script> <script text="text/javascript"> //jquery代码实现 // $(function() // var lc=$(".news-con-li"); // var txt=lc.text(); // var a=$("a"); // 在指定元素后添加dom结点 // a.after("<span id=time></span>"); // var t=$("#time"); // t.text(txt); //只删除dom结点中的文本内容，不会删除子节点 // lc.contents().filter( // function () // return this.nodeType === 3; // // ).remove(); // ) //纯js代码实现 //在指定元素前添加dom结点 function insertAfter(newElement, targentElement) var parent = targentElement.parentNode; if (parent.lastChild == targentElement) parent.appendChild(newElement); else parent.insertBefore(newElement, targentElement.nextSibling) window.onload=function() var lc=document.getElementsByClassName("news-con-li")[0]; var txt=lc.textContent; var a=document.getElementsByTagName("a")[0]; var v=document.createElement("span"); v.id="time"; insertAfter(v,a); var t=document.getElementById("time"); t.innerHTML=txt; //只删除dom结点中的文本内容，不会删除子节点 lc.childNodes[5].textContent=""; </script> <body> <ul> <li class="news-con-li"> <img src="" /> <a></a> 2022-06-07 <img src="" /> </li> </ul> </body> </html>问题解决
以上是关于在指定元素前/后添加元素结点/只删除元素结点中的文本内容不会删除子节点(js/jQuery实现)的主要内容，如果未能解决你的问题，请参考以下文章