通过JS增加节点来增加内容到原内容之前

最新推荐文章于 2024-06-25 19:24:28 发布
最新推荐文章于 2024-06-25 19:24:28 发布
阅读量891 收藏
点赞数
分类专栏： JS 文章标签： function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsf0615020117/article/details/4498160
版权

 <html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function insertMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                oNewP.appendChild(oText);
                var oOldP = document.getElementsByTagName("p")[0];
                document.body.insertBefore(oNewP, oOldP);
            }
        </script>
    </head>
    <body οnlοad="insertMessage()">
        <p>Hello World!</p>
    </body>
</html>

zsf0615020117
关注
专栏目录
JS 案例-添加节点
worm
09-02 523
需求： 点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型"; 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";      若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点  代码实现： Insert title here window.onload = function()
原生JS对DOM节点的获取和增删改
dengbi1163的博客
09-03 1040
一、原生JS获取DOM节点 获取节点的方式大致分querySelector系列和getElementsBy 系列，两种：querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。 querySelector 系列接收的参数是一个 CSS 选择符。而 getElement...
js增加节点
yqf19890729的专栏
08-24 757
function dd(){ var x=document.getElementById("maindiv"); x.parentNode.removeChild(x); } function aa(){ alert("你狠期待吧，嘿嘿！"); alert("不要急
Javascript：增加DOM节点
最新发布
听海边涛声
06-25 376
Javascript：增加DOM节点
js添加节点
lijuan2083的专栏
06-12 1150
var adPage=new Array();sql="select * from adPage"set rs=Server.CreateObject("adodb.recordset") rs.Open sql,oConn,1,1i=0do while not rs.eofResponse.Write "adPage["&i&"]=new Array("&rs("id")&","&rs("ad
JavaScript的节点操作 —— 增加节点
热门推荐
平凡的平淡的博客
04-28 1万+
目录 JavaScript中的节点操作分为：增、删、改、查（获取），四大类型。 我们直接利用案例来学习： HTML布局代码： JavaScript代码实现： 第一步：获取所有要用到的元素对象（可以利用id、class、name、标签获取）。 第二步：事件操作（单击事件、双击事件、鼠标移入事件、移出事件等等） 第三步：在单击事件中，所要做的操作。 在单击事件里面我们做JavaScript的核心代码 —— 添加节点。 最后出现的效果就是这样的效果： JavaScript中的...
js创建节点、添加节点
qq_40937541的博客
02-18 4245
创建节点：document.createElement("li") 在后面添加节点：node.appendChild(child) node父级 child 子级 在前面添加节点：node.insertBefore(child,指定元素) node父级 child 子级 <body> <ul> <li>123</li> </ul> <script> var ul = document.q
js获取html节点的子节点,Js 获取HTML DOM节点元素的方法小结
weixin_35569158的博客
06-08 1213
Js 获取HTML DOM节点元素的方法小结如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取：(1) document.getElementById(elementId) ：该方法通过节点的ID，可以准确获得需要的元素，是比较简...
原生js实现trigger方法示例代码
10-16
不过需要注意的是，通过document.querySelectorAll()获取的NodeList实例，并不包含Element原型上的trigger方法，因此需要额外添加逻辑来处理这种情况。 6. 错误处理：在尝试触发事件时，如果没有正确地绑定事件监听...
JavaScript基础-动态操作DOM节点
weixin_50909662的博客
10-12 517
我们所说的操作无非就是增删改查（CRUD） 创建一个节点（向页面中增加之前，我们需要先创建一个节点出来） 向页面中增加一个节点 删除页面中的某一个节点 修改页面中的某一个节点 获取页面中的某一个节点 创建节点 创建元素节点 createElement var pEle = document.createElement('p') console.log(pEle) // <p></p> 创建文本节点 createTextN...
原生javaScript做得动态表格(注释写的很清楚)
10-26
DOM允许JavaScript通过树状结构来访问、修改、添加、删除网页的元素。 ### 知识点二：事件处理 事件处理是JavaScript中非常重要的概念。用户在网页上的各种操作，如点击、双击、鼠标移动等，都会触发相应的事件。...
JS 添加js节点
weixin_34167819的博客
03-04 90
function AddScriptNode(src) { var N = document.createElement("script"); N.setAttribute("src", src); ...
JavaScript增加节点案例
qq_36507046的博客
07-12 1761
增加节点分为两个步骤：1、创建元素节点语法：元素.creatElement('标签名')2、追加节点创建的元素节点不会显示在页面中，要想在界面看到，还得插入到某个父元素中。有两种追加给父元素的方法。（一定是追加给元素所以需要先获取父元素） 插入到父元素的最后一个子元素语法：父元素.appendChild(子元素) 插入到父元素中某个子元素的前面语法：父元素.InsertBefore(要插入的元素，在哪个元素前插入).........
javascript追加节点
weixin_30932215的博客
09-06 391
追加节点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...
在js中添加新节点
weixin_30414155的博客
10-16 371
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=...
JS节点操作（2）- 创建节点，添加节点，删除节点，复制节点
Moony_wy的博客
02-07 3967
JS节点操作（2）- 创建节点，添加节点，删除节点，复制节点 node.appendChild(child) 添加到子元素数组的末尾 node.insertBefore(child, 指定元素) 添加到指定子元素的前面 node.removeChild(child) 删除指定子节点，返回删除的节点 cloneNode() 复制节点 复制节点要注意，cloneNode()括号里面为空或是false则为浅拷贝，只复制标签不复制里面的内容。cloneNode(true) 括号里为true则为深拷贝，复制标签和内容
js插入节点
Boke_的博客
06-21 582
window.onload = function(){ // 抓取元素 var box = document.getElementById("box"); var dage = document.getElementById("dage"); box.onclick = function(){ // 创建标签 // document.createElement('标签名（随便取）');
js动态添加节点
YW博客
05-22 2269
动态添加节点以后一定会用到，所以放在这里 var area=document.getElementById(‘first’); var cli=document.getElementById(‘cli’); cli.οnclick= function(){ var bt=document.createElement(‘button’); bt.style.cssText=“width: 30px;...
Gojs实现通过拖拽来增加节点
05-31
要实现通过拖拽来增加节点，可以按照以下步骤操作： 1. 创建一个GoJS图表对象，指定图表容器的ID。 ```javascript var myDiagram = $(go.Diagram, "myDiagramDiv"); ``` 2. 定义节点模板，包括节点的外观和行为。 ```javascript myDiagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "white" }), $(go.TextBlock, { margin: 8 }, new go.Binding("text", "key")) ) ``` 3. 定义一个Palette对象，用于存放可供拖拽的节点。 ```javascript var myPalette = $(go.Palette, "myPaletteDiv"); ``` 4. 将节点模板添加到Palette中，并指定节点所属的类别。 ```javascript myPalette.nodeTemplateMap.add("category1", $(go.Node, "Auto", $(go.Shape, "RoundedRectangle", { fill: "white" }), $(go.TextBlock, { margin: 8 }, new go.Binding("text", "key")) ) ); ``` 5. 定义节点数据，包括节点的唯一标识符和所属类别。 ```javascript var nodeDataArray = [ { key: "Alpha", category: "category1" }, { key: "Beta", category: "category1" }, { key: "Gamma", category: "category1" } ]; ``` 6. 将节点数据添加到Palette中。 ```javascript myPalette.model.nodeDataArray = nodeDataArray; ``` 7. 将Palette对象添加到图表容器中。 ```javascript document.getElementById("myPaletteDiv").appendChild(myPalette.div); ``` 8. 在图表容器中添加一个“Drop”事件处理程序，用于处理拖放操作。 ```javascript myDiagram.div.addEventListener("drop", function(e) { e.preventDefault(); var data = e.dataTransfer.getData("text"); var node = myPalette.model.findNodeDataForKey(data); myDiagram.model.addNodeData(node); }, false); ``` 以上是一个简单的实现过程，具体可以根据需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值