JS中利用dom实现追加与插入

最新推荐文章于 2024-04-25 00:00:00 发布
最新推荐文章于 2024-04-25 00:00:00 发布
阅读量1.1w 收藏
点赞数
文章标签： function button input action div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAVAZHICHIZHE/article/details/6466289
版权

           都是圈内人士了，咱就直接进入主题吧....  ^_^  ^_^

        Node对象有insertBefore(newChild, 被引用Child)和appendChild(newChild)两个方法用来插入结点。

       appendChild(newChild)方法作为某结点的方法来调用，在该结点的子结点列表的结尾添加一个newChild.

      insertBefore(newChild, 被引用的0Child)制定在 被引用Child之间插入一个newChild. 在实际应用中，需要访问某个结点的双亲结点，已获得insertBefore()方法必要的信息。
    

<html>

<head>

<title>结点插入与追加</title>
<script type="text/javascript">
<!--
   function makeNode(str)  //创建结点函数
   {
      var newParagraph = document.createElement("p");  //创建新元素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>

</head>

<body>
<h1><center> DOM插入与追加</center></h1>
<hr>
<div style="background-clolor: #66ff00;">
   <div id="innerDiv" style="background-color:#ffcc00;"></div>
</div>
<hr>

<form id="form1" name="form1" action="#" method="get">
   <input type="text" id="field1" name="field1">
   <input type="button" value="前插入" οnclick="appendBefore('innerDiv', document.form1.field1.value);">
     <input type="button" value="中插入" οnclick="insertWithin('innerDiv', document.form1.field1.value);">
       <input type="button" value="后插入" οnclick="appendAfter('innerDiv', document.form1.field1.value);">
</form>

</body>

</html>

JAVAZHICHIZHE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js浏览器操作DOM之插入DOM
weixin_34205826的博客
08-16 617
当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？ 如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。 如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替...
利用jquery如何从json中读取数据追加到html中
11-26
在Web开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。本篇文章将详细讲解如何利用jQuery从JSON数据中提取信息并将其动态地追加到HTML页面上。 首先，JSON（JavaScript ...
创建DOM元素以及追加DOM元素
思维空间
12-15 584
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;元素的创建和追加&lt;/title&gt; &lt;script type="text/javascript" src=
JS 添加数组元素（ 4种方法 ）
大剑师兰特的GIS世界
04-25 6444
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
JavaScript利用DOM给页面添加内容
diaojianli4622的博客
05-14 196
自定义一个log函数,输出传入函数的对象或者信息. Log.js // JScript source code function log(category, message, object) { // If this category is explicitly disabled, do nothing if (log.options[category ...
JavaScript 插入Dom节点
weixin_47556601的博客
02-15 4323
大家好，今天我们来分享JavaScript 插入Dom节点 首先我们要知道， 不管我们对Dom节点进行什么样的操作，都必须先获取这个节点，假如说，这个dom节点是空的，我们可以通过innerHTML就可以增加一个元素，假如这个dom节点不存在，那这样做就不行了，否则会造成覆盖（就是会将原先的数据改掉） 写源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
DOM插入节点
iteye_5722的博客
03-04 232
一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref) new：表示新的子节点。 ref：指定一个节点，在这个节点前插入新的节点。   二 应用 插入节点，本示例在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。 ...
dom-insert:DOM 插入方法
07-05
dom-插入 DOM 插入方法。 安装 npm install dom-insert 应用程序接口 可用方法： after(element, content) : 在后面插入内容。 before(element, content) : 在前面插入内容。 append(element, content) : 追加...
jQuery学习之DOM节点的插入方法总结
10-20
总结来说，jQuery提供的这些DOM插入方法极大地简化了JavaScript中的DOM操作，使开发者能够更专注于业务逻辑，而非底层实现细节。熟练掌握这些方法，可以大大提高开发效率，让代码更加简洁和易于维护。无论是内部插入...
Javascript Dom元素获取和添加详解
10-16
在JavaScript中，DOM...理解并熟练掌握DOM元素的获取和添加是JavaScript前端开发的基础，这对于动态操作网页内容、实现交互功能至关重要。正确使用这些方法和属性，可以有效地构建和修改网页结构，提升用户体验。
JavaScript 动态网页实例 - DOM中的节点操作.rar
最新发布
05-08
DOM是 Document Object Model的缩写，由W3C进行标准化。文档对象模型(DOM)是一个基础性概念，主要涉及网页页面元素...介绍DOM中的节点操作，主要包括:节点插入与追加、节点复制、节点删除与替换、修改节点内容等知识。
js和jquery对dom节点的操作(创建/追加)
10-27
本文详细介绍下js和jquery对dom节点的操作包括创建、追加等等，感兴趣的朋友可以参考下哈，希望对你有所帮助
JS实现动态添加DOM节点和事件的方法示例
10-19
主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面dom元素节点与属性的动态操作相关实现技巧,需要的朋友可以参考下
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4870
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
JS1-DOM操作之写入内容
DcTbnk的博客
04-02 380
DOM操作之写入内容 给标签对象,写入内容 是,全覆盖写入 新写的内容,会覆盖标签中,之前定义的内容 包括文字,以及子级标签 标签对象.innerHTML() 支持标签 标签对象.innerText() 不支持标签 对div标签,写入内容 新写入的内容,会覆盖,之前div标签的所有内容 包括文字,标签等 var oDiv = document.querySelector('div...
JS dom节点简单操作
烂笔头NI
08-13 386
JS dom节点简单操作实现效果如图所示： 实现代码：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function $(str){//这里简单封装一下 str=str.trim();
利用DOM创建input时，遇到的问题解决方法
lilt085163的专栏
10-10 922
元素checkbox 大多数是用来做多选框的，它们的NAME属性值相同，通过 遍历document.getElementsByName(**); 可以得到我们选择的值；这在HTML中 直接写成是没有问题的，我们可以通过上面写的getElementsByName(params);得到，但是当JavaScript中，通过DOM动态创建 checkbox时，如果按照普通的创建节点的方法创
JS（DOM与JQuery） —div添加/删除元素
有道无术，术尚可求，有术无道，止于术。
12-23 1096
一。DOM对元素的操作 1.需求：设置按钮，div中添加图片、文本框、超链接 以及删除div中多有的元素 2.document对象方法：createElement()：动态创建元素      元素对象方法appendChild()：将新元素追加到末尾       元素对象方法insertBefore(新元素对象，原节点)：将新节点插入到某节点前       元素对象属性firstChil...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值