动态添加元素

最新推荐文章于 2024-10-11 10:00:00 发布
最新推荐文章于 2024-10-11 10:00:00 发布
阅读量106 收藏
点赞数
分类专栏： JS 文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzwd111/article/details/83530412
版权

<html>
<head>
<title>JS添加删除元素</title>
<script type="text/javascript"><!--
function $(nodeId)
{
return document.getElementById(nodeId);
}
function $Name(tagName)
{
return document.getElementsByTagName(tagName);
}
function replaceMsg()
{
var newNode = document.createElement("P");//创建一个P标签
newNode.innerHTML = "<font color='red'>替换后的文字</font>";
var oldNode = $Name("P")[0];//获取body里面第一个p元素
oldNode.parentNode.replaceChild(newNode,oldNode);//直接替换了标签
}
function removeMsg()
{
var node = $("p2");//p标签
var nodeBtn = $("remove");//按钮
//node.parentNode.removeChild(node); //下面效果相同
document.body.removeChild(node);//在body中删除id为P2的元素
//nodeBtn.parentNode.removeChild(nodeBtn);//删除该按钮
document.body.removeChild(nodeBtn);
//document.body.removeNode();执行这条语句将清空body里面的任何元素
}
function addbefore()
{
var newNode = document.createElement("p");//创建P标签
//var newText = document.createTextNode("前面添加的元素");
//newNode.appendChild(newText);//与下面效果一样
newNode.innerHTML = "<font color='red'>前面添加的元素</font>";//书写P标签里面的内容
var oldNode = $("p3");//目标标签
//document.body.insertBefore(newNode,oldNode);
oldNode.parentNode.insertBefore(newNode,oldNode);//在目标标签前面添加元素
}
function addlast()
{
var newNode = document.createElement("p");//创建P标签
//var newText = document.createTextNode("后面添加的元素");
//newNode.appendChild(newText);//与下面效果一样
newNode.innerHTML = "<font color='red'>后面添加的元素</font>";
var oldNode = $("p3");
oldNode.appendChild(newNode);
//document.body.appendChild(newNode);//如果使用该方法,则在body的最后添加元素
}
window.onload = function addArrayMsg()
{
var arrayMsg = ['one','two','three','four','five'];//创建数组
var fragment = document.createDocumentFragment();//创建文档片段
var newNode ;
for (var i=0 ;i<arrayMsg.length ;i++ )
{
newNode = document.createElement("P");//创建P标签
var nodeText = document.createTextNode(arrayMsg[i]);//创建文本标签,value为数组里面的值
newNode.appendChild(nodeText);//
fragment.appendChild(newNode);//把P标签追加到fragment里面
}
document.body.appendChild(fragment);//把fragment追加到body里面
}
function addRow()
{
var tab = $("myTable");
//tab.createCaption().innerHTML="<font color='red'>我的表格</font>";
var oldTr = $("handleTr");
var newTr = tab.insertRow();//创建一行
var newTd1 = newTr.insertCell();//创建一个单元格
var newTd2 = newTr.insertCell();//创建一个单元格
newTd1.innerHTML = "<input type='checkbox' />";
newTd2.innerHTML = "<input type='text' />";
}
function removeRow()
{
var tab = $("myTable");
// if(tab.rows.length>0){
// tab.deleteRow();
// if(tab.rows.length==1)
// tab.deleteCaption();
// }
var cbbox ;
for(var i=0;i<tab.rows.length;i++){
cbbox = tab.rows[i].childNodes[0].childNodes[0];//获取input元素
if(cbbox.checked){
tab.deleteRow(i--);
}
}
}
//全选
function selAll(value){
var items = document.all.tags("input");//获取页面上所有的input元素
for(var i = 0;i<items.length;i++){
if(items[i].type=="checkbox"){//判断类型是否为checkbox
items[i].checked = value.checked;
}
}
}
function getInputValue()
{
var inputArray = new Array();//创建一个数组
var tab = $("myTable");
var tbInput;
for(var i=0;i<tab.rows.length;i++){
tbInput = tab.rows[i].childNodes[1].childNodes[0].value;
if(tbInput!=""&&tbInput!=null)
inputArray.push(tbInput);
}
inputArray = inputArray.join("*^&");//默认以","号连接
$("showValue").value = inputArray;
}
var x ='10+20';
("alert(x);")
// --></script>
</head>
<body>
<p id="p1">Hello World!
<input type="button" value="替换内容" οnclick="replaceMsg();" />
<p id="p2">我可以被删除!
<input type="button" id="remove" value="删除它" οnclick="removeMsg();" />
<p id="p3">在我上下添加一个元素吧！
<input type="button" id="addbefore" value="前面添加" οnclick="addbefore();" />
<input type="button" id="addlast" value="后面添加" οnclick="addlast();" />
<div style="border:1px solid blue;height:300px">
<table id="myTable" cellpadding="0" cellspacing="0" border="1px solid blue" style="padding:4px;" style="padding:4px;">
</table>
<input type="checkbox" οnclick="selAll(this);" />
<input type="button" value="添加一行" id="addRow" οnclick="addRow();" />
<input type="button" value="删除一行" id="removeRow" οnclick="removeRow();" />
<textarea rows="5" cols="25" id="showValue" />

wzwd111
关注
专栏目录
JS动态添加删除HTML元素(实例)
10-26
JS动态添加删除HTML元素(实例)兼容性比较不错的js代码示例
jquery动态添加元素事件失效问题解决方法
10-25
在JavaScript和jQuery中，动态添加元素是常见的操作，特别是在构建响应式和交互性强的Web页面时。然而，这种操作往往伴随着一个挑战：为这些新添加的元素绑定的事件可能无法正常工作，即所谓的“事件失效”问题。这...
JS添加删除元素
iteye_9657的博客
01-11 179
JS添加删除元素 function $(nodeId) { return document.getElementById(nodeId); } function $Name(tagName) { return document.getElementsByTagName(tagName); ...
js 对html 元素操作，添加删除修改
走自己的路让别人来看
02-11 5614
JS添加删除元素        function $(nodeId)     {         return document.getElementById(nodeId);     }     function $Name(tagName)     {         return document.getElementsByTagName(tagName);
JS添加元素，删除元素
qq_36937220的博客
10-10 233
根据效果图，实现如下图所示效果！ <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html, body { margin: 0; padding: 0; }...
JS基础-添加删除记录(复杂版)
linqunbin的博客
05-30 267
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
JS获取动态添加元素的方法详解
10-16
JS获取动态添加元素的方法是前端开发中经常遇到的难题，因为在页面加载过程中动态添加到DOM树中的元素，在页面加载时并不存在于DOM树中，所以不能直接使用传统的选择器获取到这些元素。本文将详细介绍三种常用的方法...
JS动态添加元素及绑定事件造成程序重复执行解决
10-18
标题《JS动态添加元素及绑定事件造成程序重复执行解决》所涉及的知识点主要有以下几个方面： 1. 动态元素的事件绑定问题：在JavaScript中，当我们通过Ajax或者SPA页面动态添加元素到DOM中时，直接使用常规的事件...
用js实现添加和删除元素的功能
WaterArticle
07-21 882
用js实现添加和删除元素的功能。
js添加删除元素
kongjunchao159的博客
08-06 455
//通过id获取元素 function $(id){ return document.getElementById(id); } //通过标签获取元素 function $Name(tagName){ return document.getElementsByTagName(tagName); } //替换标签里面的内容 function replaceMsg()
js动态增加，删除行，可运行
01-08
web端js动态增加删除表格行，双击打开即可看效果
添加删除元素
weixin_45214250的博客
09-17 139
添加删除元素 （1）createLIement创建一个元素节点 createEement（‘p’）创建一个段落 1 （2）creatTextNode创建一个文本节点 creatTextNode（“文本内容”）创建一个值为‘文本内容’的文本节点 （3）appendChld 添加子节点 （4）remoyeChild 删除子节点 动态删除 这种方法是分别找到父节点和要删除的节点，然后执行删除操作。这种方法有一个前提 需要知道父节点是谁 那么如果说不知道父节点是谁，该怎么删除呢？ 动态添加和
js增加删除
qq_41011687的博客
04-18 125
Title 1 2 3 4 增加 删除
JavaScript中的添加和删除操作
fsLees的博客
07-20 1102
JavaScript中的添加和删除操作集合
js添加、删除、替换或插入元素。
zhang20040217的博客
01-17 502
在JavaScript中，有多种方式可以添加、删除、替换或插入元素。这个过程通常包括删除旧元素并添加新元素。
js中获取、改变、添加、删除元素的方法
最新发布
QQ1257871322的博客
10-11 330
通过以上方法，您可以轻松地获取、改变、添加和删除DOM元素。这些操作使得网页能够动态响应用户交互，实现更加丰富的用户体验。在实际开发中，灵活运用这些DOM操作可以大大提高网页的可用性和美观性。
js 添加、删除DOM元素
qq_36158551的博客
03-09 2313
该方法添加的元素位于父元素的末尾，使用方法：parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素${${
用javascript完成简单的添加删除
qq_41672008的博客
01-20 473
我创建了一个表格，这个表格可以添加员工的name,email,salary等属性，同时也能删除这些属性，有很详细的注释 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;title&gt;&lt;/title&gt;      
在js中添加和删除html
小雨飞的博客
08-14 4681
html &lt;ul style="list-style-type:upper-latin;" id="fm1"&gt;          &lt;li&gt;                  &lt;input type="text" name="content" /&gt;                  &lt;button onClick="
原生js动态添加元素
08-26
在原生 JavaScript 中，可以使用以下方法动态添加元素： 1. 创建新元素：使用`document.createElement()`方法来创建一个新的 HTML 元素。例如，要创建一个新的 `div` 元素，可以使用以下代码： ```javascript let ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值