DOM对象的操作

最新推荐文章于 2022-11-01 22:32:05 发布
最新推荐文章于 2022-11-01 22:32:05 发布
阅读量1k 收藏 1
点赞数
分类专栏： 忘掉了的开发 文章标签： function button input generator html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcfgaoyong/article/details/724274
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>


<SCRIPT LANGUAGE="JavaScript" type-"text/javascript">
<!--
function createNode()
{
 var newnode=document.createElement('p');
 var newText=document.createTextNode("something to add");
 newnode.appendChild(newText);
 var current=document.getElementById('p1');
 current.appendChild(newnode);
 return current;

}
function makeNode(str)
{
 var newParagraph=document.createElement('p'); 
 var newText=document.createTextNode(str);
 newParagraph.appendChild(newText);
 return  newParagraph;
}

function appendBefore(nodeid,str)
{
 var node=document.getElementById(nodeid);
 var newnode=makeNode(str);
 if(node.parentNode)
  node.parentNode.insertBefore(newnode,node);
}
function insertWithin(nodeid,str)
{
 var node=document.getElementById(nodeid);
 var newnode=makeNode(str);
 node.appendChild(newnode);
}
function appendAfter(nodeid,str)
{
 var node=document.getElementById(nodeid);
 var newnode=makeNode(str);
 if(node.parentNode)
 {
  if(node.nextSibling)
   node.parentNode.insertBefore(newnode,node.nextSibling);
  else
   node.parentNode.appendChild(newnode);
 }
}
//-->
</SCRIPT>
<BODY>
<H1>DOM insert and append</H1>
<hr>
<div style="background-color:#66ff00;">
 <div id="innerDiv" style="background-color:#ffcc66;"></div>
</div>
<hr>
<FORM id="form1" name="form1">
<INPUT TYPE="text" NAME="field1">
<INPUT TYPE="button" value="Before" οnclick="appendBefore('innerDiv',document.form1.field1.value)">
<INPUT TYPE="button" value="middle" οnclick="insertWithin('innerDiv',document.form1.field1.value)">
<INPUT TYPE="button" value="after" οnclick="appendAfter('innerDiv',document.form1.field1.value)">
</FORM>
</BODY>
</HTML>

lcfgaoyong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习基础笔记之DOM对象操作
10-28
javascript是一种基于对象和世界驱动，并且安全性较强的脚本语言。一个完整的javascript实现包括核心（ECMAScript），文档对象模型（DOM）和浏览器对象模型（BOM）
React 函数组件导出自定义方法的办法说明
白袍小将的博客
11-10 1905
本文阐述了React函数型组件如何暴露自己的方法的实现办法。在进行React开发时，函数组件是比较方便的，由于函数组件没有this指针，因此如果想在父组件里调用函数型子组件的方法，就需要用到React.useImperativeHandle 这个帮助函数。
React新文档：不要滥用Ref哦～
Yvette Lau的专栏
06-22 424
React新文档有个很有意思的细节：useRef、useEffect这两个API的介绍，在文档中所在的章节叫Escape Hatches（逃生舱）。显然，正常航行时是不需要逃生舱的，只有在遇到危险时会用到。如果开发者过多依赖这两个API，可能是误用。在React新文档：不要滥用effect哦中我们谈到useEffect的正确使用场景。今天，我们来聊聊Ref的使用场景。为什...
【React Hook】一文让你彻底明白何为Effect Hook？
Milk~每天分享一点点，技术进步一点点
08-11 868
使用 Effect Hook Effect Hook 可以让你在函数组件中执行副作用操作 示例： import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => {
appendChild方法详解
weixin_33989780的博客
10-28 567
方法：target.appendChild(ele); 执行该方法时，会发生两部操作： 1、将元素ele从原来的父元素中移除掉 2、将元素追加至新的目标元素中，并且保留元素的所有样式信息和事件、、。 将一个元素ele追加至另一个元素Div中时，默认会将该元素从原来元素中移除掉，并且该元素的样式信息、事件绑定等都会保留。 示例如下： 将div11追加到下面的div区域，则会...
详解PHP原生DOM对象操作XML的方法
10-21
大家都知道对于操作XML类型文件，PHP...对XML的操作，从创建、添加到修改、删除都可以使用DOM对象中的函数来进行。下面这篇文章通过示例代码给大家介绍如何进行操作，有需要的朋友们可以参考借鉴，下面来一起看看吧。
PHP原生DOM对象操作XML.pdf
10-10
本文将深入探讨如何使用PHP的DOMDocument对象来操作XML。 首先，我们来看如何创建一个新的XML文件。在PHP中，创建XML文件通常涉及以下几个步骤： 1. 实例化DOMDocument对象：`$dom = new DOMDocument('1.0');` ...
Javascript操作dom对象之select全面解析
10-19
下面小编就为大家带来一篇Javascript操作dom对象之select全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS中appendChild()与insertBefore()方法的使用
soos的博客
07-05 853
appendChild()方法：向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newChild)； insertBefore()方法：在已有的子节点前插入一个新的子节点。语法：insertBefore(newChild,refChild)； 相同之处：都是插入子节点 不同之处：appendChild()方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说）
DOM的操作
Mr_115的博客
11-01 2522
DOM的操作
DOM对象（一）——DOM对象介绍、获取元素、事件和样式操作（包括案例：仿京东显示密码 点击关闭二维码等）
m0_53619602的博客
07-14 1062
## 常见的鼠标事件 |鼠标事件| 触发条件 | |--|--| | onclick | 鼠标点击左键触发 | | onmouseover |鼠标经过触发 | | onmouseout | 鼠标离开触发 | | onfocus |获得鼠标焦点触发 | |onblur |失去鼠标焦点触发 | |onmousemove | 鼠标移动触发 | |onmouseup | 鼠标弹起触发 | |onmousedown |鼠标按下触发 |...
DOM对象简单使用
csharp的专栏
07-22 1273
很久没有真正的写东西了..忙着找工作..现在工作有个着落了..又有心思研究.学习新的东西了这篇为以后学ajax打基础的生成DOM文档对象的方法var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.4.0");  生成XML文档对象xmlDoc，xmlDoc中包含XML文档中所有元素和节点 xmlDoc.async=false;装载XML文档完毕后才开始处
JS操作dom对象的入门（比较系统全面）
mcy478643968的专栏
10-18 9086
<br /><br />一、什么是DOM？ <br /><br />   什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
DOM对象的基础用法
PlayBoyH的博客
04-03 275
js（javascript）分为三大部分： 1.js的基础语法（也就是ECMAScript，简称为ES6）。 2.DOM：document object model。 3.BOM：浏览器为对象。 html页面中都有一元素。html标签就是根。 文档：一个页面就是一个文档。 元素：（element）页面中所有的标签都是元素。每个标签都是一个元素。 节点：页面的所有内容都是节点。 root：根/ ...
DOM对象-节点的操作
a920119797的博客
03-19 1240
上篇整理的是dom对象的一些基本知识，好久也没来写博客了，以后一定要养成习惯啊啊~~ 废话少说，直接进入正题，这次整理的是dom对象节点的操作，可以通过操作dom节点对html进行修改等、 ++++++++++++++++++++++++这里是分割线+++++++++++++++++++++++++++++++++++++++++++ 1、getElementByName()方法
使用jquery操作DOM对象
诗人密语
10-27 2349
目录 1、DOM操作分类 2、jQuery中的DOM操作 ①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass() ②使用jQuery操作文本与属性值内容——html()、 text()、 val() ③使用jQuery操作DOM节点——查找、创建、插入、删除、替换、复制和遍历 ④节点属性操作：attr() 、r...
DOM对象的基本操作
ohh19894860013的博客
05-05 1034
DOM对象： DOM的英文全称是Document Object Model，即文档对象模型。文档一般是指HTML文档，DOM对象模型将HTML文档组织为以Node对象为节点的层次结构。一个节点是一个Node对象。Node对象按照节点类型分为元素节点、属性节点、文本节点和注释节点。元素节点（也称为元素对象）由元素节点、属性节点、文本节点和注释节点构成。 innerHTML和innerText innerHTML：获取到元素的全部信息 innerText：获取到元素的文本信息 funct...
038HTML-DOM对象.doc
最新发布
11-30
- **DHTML对象模型回顾**：介绍了整个DOM对象模型的结构，包括window对象（之前已学）和screen对象，后者提供了关于浏览器屏幕尺寸、分辨率等信息的访问。 - **screen对象**：这是Window对象的screen属性所指向的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值