`

动态添加元素

    博客分类：
  • JS
JavaScript
阅读更多

<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="替换内容" onclick="replaceMsg();" />
<p id="p2">我可以被删除!
<input type="button" id="remove" value="删除它" onclick="removeMsg();" />
<p id="p3">在我上下添加一个元素吧！
<input type="button" id="addbefore" value="前面添加" onclick="addbefore();" />
<input type="button" id="addlast" value="后面添加" onclick="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" onclick="selAll(this);" />
<input type="button" value="添加一行" id="addRow" onclick="addRow();" />
<input type="button" value="删除一行" id="removeRow" onclick="removeRow();" />
<textarea rows="5" cols="25" id="showValue" />

分享到：
| EL表达式原样输出
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery动态添加元素事件失效问题解决方法

    在JavaScript和jQuery中，动态添加元素是常见的操作，特别是在构建响应式和交互性强的Web页面时。然而，这种操作往往伴随着一个挑战：为这些新添加的元素绑定的事件可能无法正常工作，即所谓的“事件失效”问题。这...

    解决layui动态添加的元素click等事件触发不了的问题

    在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的，当动态添加 ‘.add_project’ 时候，新添加的元素却触发不了click事件，类似下面的写法： $(".add_project").on('click', function(){ alert&#40...

    JS获取动态添加元素的方法详解

    JS获取动态添加元素的方法是前端开发中经常遇到的难题，因为在页面加载过程中动态添加到DOM树中的元素，在页面加载时并不存在于DOM树中，所以不能直接使用传统的选择器获取到这些元素。本文将详细介绍三种常用的方法...

    jQuery为动态生成的select元素添加事件的方法

    6. 动态添加元素到页面中：在需要的时候，使用jQuery的`.append()`方法将创建好的select元素添加到页面的指定容器中。这个操作会把新的HTML字符串插入到页面的DOM中，从而使得select元素变得可用。 7. 绑定事件到...

    JS动态添加元素及绑定事件造成程序重复执行解决

    标题《JS动态添加元素及绑定事件造成程序重复执行解决》所涉及的知识点主要有以下几个方面： 1. 动态元素的事件绑定问题：在JavaScript中，当我们通过Ajax或者SPA页面动态添加元素到DOM中时，直接使用常规的事件...

    js动态的添加元素例如表格1

    JavaScript动态添加元素及表格操作 在JavaScript中，动态添加元素是指通过编程方式在网页中添加新的HTML元素，例如添加表格、列表、按钮等。这种技术广泛应用于Web开发中，例如在 Ajax 应用程序中，为了提供实时的...

    unigrid添加html5 dom元素.rar

    HTML5 DOM（Document Object Model）是一种编程接口，允许程序和脚本动态更新、添加、删除以及改变HTML和XML文档的结构。在Delphi中，通过TWebBrowser控件，开发者可以与HTML5 DOM进行交互，实现诸如加载HTML文档、...

    javaScript动态添加Li元素的实例

    在这个示例中，通过获取ul元素（其id为“J_List”）的innerHTML属性，并在其末尾添加新的li元素的HTML代码，从而实现动态添加元素的功能。在创建新li元素时，使用了HTML转义字符来处理包含双引号的字符串，这样做是...

    jQuery实现动态添加、删除按钮及input输入框的方法

    append()方法会将指定内容添加到匹配元素集合中每个元素的末尾，是动态添加元素的核心方法之一。在添加输入框的同时，也会相应地增加FieldCount和x的值，以记录和追踪已添加输入框的数量。 删除输入框的实现利用了...

    Jquery 动态添加元素并添加点击事件实现过程解析

    在进行网页交互设计时，经常会遇到需要在页面加载后动态添加元素，并给这些元素绑定事件处理器的场景。jQuery作为一款强大的JavaScript库，提供了许多便捷的方法来实现这一功能。本解析主要介绍如何利用jQuery动态...

    js 动态添加元素(div、li、img等)及设置属性的方法

    以上就是从给定文件中提炼出的关于JavaScript动态添加元素及设置属性的方法的知识点总结。这些知识点对于前端开发人员来说非常基础且重要，是实现网页动态交互的基础技能之一。在实际应用中，通过这些技术可以完成很...

    jQuery动态添加元素无法触发绑定事件的解决方法分析

    本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法。分享给大家供大家参考，具体如下： 最近遇到一个问题，即当用jquery动态添加元素后，发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料...

    动态添加删除表单元素

    在网页开发中，动态添加和删除表单元素是一项常见的需求，尤其在用户需要根据自身需求增减输入项的场景下。这项技术主要依赖于JavaScript，它使得前端交互更加灵活和人性化。下面我们将深入探讨如何利用JavaScript...

    JQuery 动态删除添加html元素bind事件

    然而，在动态添加元素后，使用`bind()`可能无法立即捕捉到新元素的事件，因为事件处理程序是在元素创建时绑定的。为了解决这个问题，可以使用`live()`或`on()`方法（jQuery 1.7+）来实现事件委托。在jQuery 1.3到1.9...

    jQuery如何获取动态添加的元素

    当动态添加元素到DOM中时，这些元素会继承父元素上的事件监听器。 例如，假设有一个段落标签，我们希望通过点击任何新增的元素来触发一些行为。原始代码可能如下： ```javascript $(document).ready(function(){ ...

    html动态添加table行

    实现自动添加table行，增删改查功能统一完成实现，统一提交

Magicbox
Global site tag (gtag.js) - Google Analytics