克隆div并更改值
是指在前端开发中，通过复制一个已存在的div元素，并对其内容进行修改。这个过程通常涉及以下几个步骤：
- 克隆div元素：可以使用JavaScript中的
cloneNode()方法来克隆一个div元素。该方法会创建一个指定节点的副本，并返回副本节点。 - 更改值：一旦克隆完成，可以通过JavaScript操作DOM来修改克隆后div元素的内容。可以使用
innerHTML属性来更改div元素内部的HTML内容，或者使用innerText或textContent属性来更改纯文本内容。
下面是一个示例代码，演示如何克隆一个div元素并更改其值：
<!DOCTYPE html>
<html>
<head>
<title>克隆div并更改值示例</title>
</head>
<body>
<div id="originalDiv">
<h2>原始div</h2>
<p>这是原始div的内容。</p>
</div>
<button onclick="cloneAndModify()">克隆并更改div</button>
<script>
function cloneAndModify() {
// 克隆div元素
var originalDiv = document.getElementById('originalDiv');
var clonedDiv = originalDiv.cloneNode(true);
// 更改值
clonedDiv.querySelector('h2').innerText = '克隆后的div';
clonedDiv.querySelector('p').innerText = '这是克隆后div的内容。';
// 将克隆后的div插入文档中
document.body.appendChild(clonedDiv);
}
</script>
</body>
</html>在这个示例中，我们首先定义了一个原始的div元素，其中包含一个标题和一个段落。然后，通过点击按钮触发cloneAndModify()函数，该函数会克隆原始div元素并修改克隆后div元素的标题和段落内容。最后，将克隆后的div插入到文档中。
这个技术在前端开发中经常用于动态生成相似的元素，或者在需要重复使用某个模板的情况下。例如，可以使用克隆和修改技术来动态添加表单字段、列表项等。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法提供相关链接。但腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，可以通过搜索腾讯云官方网站或咨询腾讯云客服来获取更多相关信息。
相关·内容
2回答
我有一个被克隆的选择框。我想从每个克隆的选择框中删除用户之前的选择。下面是执行clone()的方法：
function addselect(s){
$('#product_categories > .category_block:last').after(
$('#product_categories > .category_block:last').clone()
);
set_add_delete_links();
return false;
}
function set_add_delete_links()
浏览 3提问于2010-05-21得票数 2
回答已采纳
4回答
我正在尝试克隆DIV及其内部元素。如何更改所有内部元素的名称？另外，我在单选按钮上有函数调用。我需要更改函数的名称also.Here是我的HTML代码。我很感谢你的帮助。
<div id="clonableDiv">
<input id="radio_1" type="radio1" onclick="toggleNames1()" value="Yes" name="Yes">
Yes
<br>
<input id="
浏览 0提问于2011-11-15得票数 1
回答已采纳
<div class="container">
<select class="btn" name="item">
<option>Alpha</option>
<option>Beta</option>
<option>Gamma</option>
<option>Theta</option>
</select>
<input type="text"
浏览 4提问于2017-07-08得票数 3
回答已采纳
1回答
您好，所有我有一个网站，用户可以添加经验，同时添加经验，他们可以添加和删除更多数量的字段，但在添加/附加的数据中有一个输入类型日期，发送相同的日期一直像
我的代码是
<div class="full_exp_9092k" id='duplicater'>
<div class="full_one_row_009so">
<div class="obe_left_dibbhsy78">
<div class="header_009sos
浏览 0提问于2016-01-20得票数 0
html结构如下所示
<div id="parent">
parent may contain text
<div id="child1">
child 1 may contain text
<script>console.log('i always contain something');</script>`
</div>
<div id="child2">
child2 may c
浏览 0提问于2012-06-30得票数 13
回答已采纳
我的目标是添加下拉按钮点击。第一个下拉列表允许我选择一个子下拉列表。它运转正常。但是当我再加一滴的时候，它就失败了。add按钮添加另一个下拉列表，其功能与第一个下拉列表完全相同。
这是我的密码：
<div class="mydropdown">
<div id="dropdown"
<label for="xyz" >xyz</label>
<select id="id_xyz" name="xyz_id">
浏览 1提问于2013-06-21得票数 1
回答已采纳
我有一个脚本，可以通过DOM操作来改变div的外观。应用程序的方式是，当页面加载时，DIV以其原始状态呈现，该函数操作div。问题是它在渲染更改后的div之前先渲染原始div。
我试过了：
//Make div invisible
//Call function to change the DIV
//Make div visible
这不起作用
浏览 0提问于2009-02-18得票数 1
嗨伙计们，
我很难让我的克隆选择字段正常工作。所有克隆的选择字段都未能反映它们填充的选定项。此外，当尝试在克隆的select字段上选择新选项时，所选选项不会更新。
我有一种感觉，有一个非常简单的解决方案，我一直忽视。谢谢你的帮助。
<div class="address">
<div class="address-clone section-clone">
<!-- Contact Details Box -->
<ul class="section-header lis
浏览 2提问于2014-07-10得票数 0
回答已采纳
我有一个项目列表，在单击其中一个项目时，将显示一个模式对话框，供用户进行一些更改，然后单击"Close“或"Save changes”。
问题是，假设用户进行了一些更改并单击了"Close"，这些更改将反映在视图绑定到的模型中，因为数据绑定是即时的。
我的问题是，我该如何推迟更新，只在单击"Save Changes“时执行绑定，或者在单击"Cancel”时以某种方式忘记更改。
我的模式对话框的代码如下：
<div ui-modal class="fade static" ng-model="modalShown
浏览 0提问于2012-10-09得票数 21
回答已采纳
3回答
清除从jQuery 函数创建的文本字段值时遇到问题。我只是复制add_new_content内容，并附加了最后一个add_new_content element.it works good.But以防万一，在文本字段中输入一些文本后单击add_new_box表示。它克隆与输入value.but我想要新鲜的文本字段。
加价
<div class="add_new_content">
<div class="add_new_box">ADD NEW</div>
<input type="text" value
浏览 49提问于2011-07-27得票数 26
回答已采纳
3回答
我们可以复制/克隆HTML部分，包括附加到它的所有事件处理程序吗？
为了简化这个概念，假设我有一个<div>，它在鼠标单击时触发alert()。我希望复制该<div>以及与其关联的处理程序；因此，单击时，复制的<div>也会触发警报。我可以复制，但处理程序似乎没有被正确地复制。这是。
谢谢。
浏览 4提问于2012-01-20得票数 2
回答已采纳
1回答
工作代码:
我在我的reactjs项目中使用Material UI，我正在尝试使用onChange函数来更新表的文本字段中输入的值，目前该值存在于数组的数组中，我想要更新componentQuantity，我知道要传递事件来获取event.target.value，但是更新数组中的文本字段的特定值的正确方法是什么？请谁来帮帮我。
class TabData extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: [
浏览 1提问于2021-06-01得票数 1
回答已采纳
1回答
我有一个使用克隆()函数克隆的字段集，另一方面，我需要从数据库中自动设置一些克隆字段的值，我不知道如何用我的表单来实现，因为在我的html中，我只能访问原始的字段集，而不是克隆的字段集，对于如何做到这一点，我有什么想法吗？
这是我的代码：
<div class='placeholder'>
<div id='template0' name='template0' class='template'>
<p>
<fieldset id='fina
浏览 1提问于2018-06-26得票数 0
1回答
当我选择另一个字段时，我正在尝试克隆HTML搜索的一部分。
完整的Html表单为：
<div class="form-group col-sm-6 col-md-3">
<h4 class="title">Who</h4>
<div class="row">
<div class="col-xs-4">
<label>Rooms</label>
<div class="selector"
浏览 3提问于2015-02-26得票数 3
4回答
我正在努力学习和理解jquery，但我在使用多个选择器时遇到了一些问题。当我的选择器中有一个克隆的jquery对象时，我似乎不能更新属性，id和name。
HTML
<div class="File">
Choose a file:
<input id="File0" name="File0" type="file" />
</div>
<input id="AddFile" type="button" value="Add a File&
浏览 1提问于2013-03-03得票数 0
回答已采纳
3回答
我目前正在使用Tumblr API，并试图添加每个帖子。我希望保持标题和日期与照片一起发布，所以我尝试使用克隆()方法。每次贴上一篇文章，它都会加倍。所以第一篇文章是一张照片，第二篇是两张相同的照片，第三篇是四张相同的照片，等等。
下面是HTML：
<section class='site-content'>
<span class="fa fa-bars"></span>
<div class="tumblr">
<div class="
浏览 3提问于2015-07-17得票数 0
回答已采纳
我想通过测试Angular JS原始设置来调整表单项目的显示，比如按钮的启用/禁用属性。
当单击事件触发时，窗体的原始值会像我预期的那样更改，但是当我直接操作范围变量时，窗体的原始设置不会更改，即使窗体上的控件绑定到该变量也是如此。
请参阅以下JSfiddle：
我预计，当控件绑定到范围变量时，布尔值的改变会导致forms原始设置发生变化。有没有更好的方法来测试这个？当表单上没有任何变化时，有没有更好的方法来调整按钮或其他DOM元素？提前感谢您的指点。这是JSfiddle不工作的情况下的代码。
<div ng-app ng-controller="MyCtrl">
浏览 0提问于2013-02-13得票数 23
回答已采纳
我现在就是这么做的：
function switchcontent(wait){
//fade out image1
$('#feature-img img:first-child, ').delay(wait).fadeOut('slow', function() {
//fade in imag2
$('#feature-img img:nth-child(2)').fadeIn('slow');
var prev_img = ($(this).clone())
浏览 0提问于2012-10-02得票数 1
回答已采纳
我使用jsviews进行数据绑定：
我的模板
<script id = "ProfileTemplate" type="text/x-jsrender">
<input data-link="userVO.first_name" type="text">
<input type="reset" value="Reset" onclick="this.form.reset();">
</script>
我的表单
<form name
浏览 0提问于2014-01-17得票数 0
2回答
克隆日期选择器
、、
嗯，我知道有很多关于它的帖子，但到目前为止我已经尝试了很多解决方案，但都不能让它工作。发生的情况是，当我克隆div时，用datepicker克隆的字段同时发生变化，所以，无论我在一个字段中选择什么日期，另一个字段也会发生变化。我遗漏了什么，所以我可以将值重置为新值？
$(document).ready(function() {
$('#btnAdd').click(function() {
$( '.datepicker').datepicker('destroy');
var num = $('.clonedInput')
浏览 0提问于2012-02-09得票数 0
回答已采纳
所有这些都很好，刚才我重新分析了其他函数的代码，现在出现了这个愚蠢的问题，我不知道为什么会发生这种情况。
用于textarea的jquery中的标记
+'<div class="ckit-container__ft" data-ckit-footer>'
+'<form action="" class="ckit-composer-form">'
+'<div class="ckit-composer"&
浏览 2提问于2016-07-12得票数 0
回答已采纳
jQM代码
for(var key in sessionStorage)
{
var item = sessionStorage.getItem(key);
var viewItem = $.parseJSON(item);
var titleR = viewItem.title;
$(".showTitleR").val(titleR);
}
html代码
<div role="main" class="ui-content">
<div>
<input c
浏览 2提问于2014-12-18得票数 0
我正在尝试使用jquery克隆()在我的网页上显示卡片。当页面加载时，它必须根据特定位置的房间数克隆卡片div。我硬编码计数为，房间计数，。我试着按照使用simple for循环，但是每次都会使div的计数增加一倍。请给我正确的输入。
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-2">
<div class="card">
<h6 class="
浏览 2提问于2016-10-10得票数 1
回答已采纳
1回答
我使用下面的脚本，使多个jQuery UI滑块具有一个合并的总数：
现在，我想从页面加载上的一个滑块开始，在单击按钮之后，我想添加另一个滑块，该滑块应该包含在计算中。但不幸的是，在我的方法中，当我添加一个新的滑块时，第一个滑块得到了值NaN，当我试图移动它时，我得到了下面的错误Uncaught TypeError: Cannot read property 'addClass' of undefined。
当我从一开始就包含多个滑块时(通过PHP)，它可以正常工作。
以下是html结构：
<div class="form-group taskType"&g
浏览 3提问于2014-09-03得票数 0
回答已采纳
1回答
我正在尝试用react构建一个简单的树形菜单。我发现this video确切地显示了我想要实现的目标(his Codepen)。我能够实现他的方法，但出于好奇心，我尝试使用钩子复制相同的方法。我最终得到了这个(简化的)： my Codepen const App2 = () => {
const [selectedOptions, setSelectedOptions] = React.useState({});
React.useEffect(() => {
console.log(selectedOptions);
},[selectedOpt
浏览 22提问于2020-06-21得票数 0
回答已采纳
1回答
我用jquery将div克隆到另一个div上，它运行得很好。我遇到的问题是，我克隆的div的子代在克隆之前有一个分配给它的CSS，所以当我克隆并将它附加到另一个div时，它也会传输CSS数据。我试图在克隆后更改div的CSS，但主要CSS正在覆盖它。我试过这个重要的属性，但没有用。如何更改克隆元素的CSS？注意:如果克隆的div没有任何以前的CSS，下面的方法可以工作。任何帮助都是非常感谢的。提前谢谢。
更新：
正如建议的那样，我已经包含了完整的代码，但是请记住，克隆的元素现在被附加到了一个popover中。若要查看克隆，请单击.newDiv
//what I tried, it didn
浏览 4提问于2022-01-12得票数 0
回答已采纳
3回答
如何获取克隆选项选择菜单的值？
、、、、
我有一个非常大的下拉菜单在html与“选择选项”。因为我想多次使用这个菜单，所以我想使用"clone jQuery appendTo“复制下拉菜单。 但是如何获得克隆的下拉菜单的值呢？这是我尝试过的。它给我返回了selectedValueCar2的“未定义” <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="
浏览 12提问于2021-06-25得票数 0
我有一个div，其中包含一个带有两个选择菜单的表单。
我使用下面的代码克隆并移动了包含select的div (而不是整个表单)：
$(document).ready(function(){
var cloned_language = $('#order__header').clone();
var header_languages = $('.top_menu.main_menus');
(header_languages).append(cloned_language);
});
问题是选择菜单的功
浏览 1提问于2013-06-16得票数 0
我正在尝试使用jquery的attr()函数更新表单元素的ID。用于调试目的。
我似乎可以给其他元素赋值，比如attr('title'，'test')就行了。只有当我想要更新ID时才会这样。
我想要更新ID的全部原因是，我正在动态构建表单域，需要为它们分配ID。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
浏览 3提问于2011-07-03得票数 0
2回答
我在有一个简单的拖放问题。如果拖放绿色框，则拖放处理程序会克隆被拖动的对象，并将其插入发生拖放的xy处的红色框中。绿色框具有绝对定位，并且克隆将在放置点处获得偏移量。
拖放框一次可以正常工作，但我不能拖放克隆和插入的新框，即使Firebug显示它有ui-draggable类。
有人看到问题了吗？
谢谢。
显然，我需要显示一些代码，因为我引用了一个jsfiddle：
<div id="red">
<div id="box_green" class="green"></div>
</div>
浏览 0提问于2013-04-10得票数 0
这是我的根元素，数据中的"booking“是一个带有sitebooking的对象。Sitebooking对象可以包含名和姓的对象数组。
var app = new Vue({
el: '#app',
data: {
booking: {
sitebooking: [{
firstname: "",
lastname: ""
},{
firstname: "&
浏览 1提问于2018-03-15得票数 1
2回答
在克隆模板div来为数据集创建元素时，我遇到了一个问题。
问题是，类在为每个数据记录创建元素之间累积。
示例JS：
$(document).ready(function(){
var data = [
{cls: 'test1',text:'test1'},
{cls: 'test2',text:'test2'},
{cls: 'test3',text:'test3'}
];
for(var x in data)
{
var item = $(
浏览 2提问于2011-11-11得票数 0
回答已采纳
3回答
我已经实现了jquery克隆和删除。单击ADD按钮时，将克隆带有特定表单元素的DIV，并将其插入到另一个DIV B中。在中，有一个隐藏的表单按钮REMOVE。现在，我需要只在单击ADD按钮时在克隆中启用REMOVE按钮。也就是说，我想在中保留表单元素，总是隐藏的。
这是我的密码。
<div class="rule" id="rule">
<div class="fm-req">
<select name="
浏览 0提问于2012-12-14得票数 2
回答已采纳
我有一个TODO应用程序，希望通过道具从一个组件到另一个组件，一个对象数组。每次单击按钮时都会添加一个对象，但我对它有困难。问题是，添加到数组中的每个对象的属性值都是相同的。似乎没有正确地保存每个tareas.tarea数据。
App.vue
<template>
<div>
<Header></Header>
<AgregarTarea @tareaAgregada="agregarTarea"></AgregarTarea>
<div class="contai
浏览 0提问于2020-04-20得票数 2
回答已采纳
我正在尝试通过JQuery循环递增，以使用来自JSON文件的数据填充一些HTML代码。问题是我似乎不知道如何将div一个接一个地写到HTML中，取而代之的是循环将数据逐个递增，最后在屏幕上显示数组中的最后一个对象。
这是我的Javascript (tubing.js)：
$(document).ready(function() {
crazyFun();
});
function crazyFun() {
for (var i = 0; i < virtualGoods.length; i++) {
var alpha= $('div.container'
浏览 0提问于2010-07-20得票数 2
回答已采纳
当我执行类似divNode.appendChild(pNode)的操作时，pNode被移到divNode内部。看起来它的父类已经从原来的divNode变成了like。这是一种预期的行为吗？
下面是我的代码：
<html>
<head>
<style>
p {
background: orange;
}
div {
background: lightcyan;
padding: 5px;
}
</style>
<script>
window.onload = function() {
pNode = do
浏览 0提问于2012-03-24得票数 3
回答已采纳
1回答
小提琴：
我正在创建一个移动表单，允许用户根据需要添加另一行输入。
HTML：
<div data-role="collapsible" data-theme="a" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h4>Resident Birthday Cards</h4>
<div da
浏览 2提问于2013-12-23得票数 0
回答已采纳
我有个div
<div id="myDiv"><h3 id="myHeader"></h3 ></div>
我创造了几个克隆的div
var $divClone1 = $('#myDiv').clone();
var $divClone2 = $('#myDiv').clone();
var $divClone3 = $('#myDiv').clone();
我希望能够将myHeader的值设置为三个克隆中的每个克隆中不同的值--然后他们的想法是将所有单
浏览 0提问于2015-07-14得票数 0
回答已采纳
1回答
这是我的桌子在迪夫：
<div class="employmentHistory">
<table class="employmentHistoryForm">
<tr>
<th>Name</th>
<th>Position</th>
<th>Action</th>
&l
浏览 0提问于2013-08-02得票数 1
回答已采纳
2回答
我们有以下文件：Action.php
<?php
$array = array(
0 => array(
'id' => "2",
'name' => "Start",
'password' => "start"
),
1 => array(
'id' => "3",
'name' => "M
浏览 2提问于2011-02-21得票数 1
回答已采纳
2回答
我有一个由100行组成的表(名为mytbl -见下文)。在这个表中，我只想取前五行(假设用户按下“显示前五行”)
这是我尝试过的，但是警报给了我“空”。
var $updatedtable = $("#mytbl");
$updatedtable.empty();
for ( var i = 0; i < 5; i++ )
{
$updatedtable.append(document.getElementById("mytbl").rows.item(i).innerHTML)
}
alert($updatedtable);
$update
浏览 0提问于2015-05-10得票数 2
如何将数据(即输入字段(name)中的数据和文本区域(body)中的数据)绑定到我的服务并将其发送到我的服务器？有什么特别的方法吗？问题似乎是从我的ngModel绑定到输入。我的密码里漏掉了什么？提前感谢
组件
<div class="col-sm-11">
<h1>Tiny MCe</h1>
<label>Title</label>
<input name="title" [(ngModel)]="editor.title" placeholder=
浏览 9提问于2017-03-22得票数 0
回答已采纳
如何克隆DIV，将其添加到div之后，并为其赋予新的标识符？
我有一个带有类reflection的DIV，我想要克隆这个DIV的每个实例，并将其插入到原始实例之后，但是有reflected类(没有类reflection)，我如何使用jQuery实现这一点？
这是我目前的小提琴，但它不能正常工作...
浏览 0提问于2012-02-09得票数 6
回答已采纳
我正在尝试使用jQuery在表单的末尾附加一个克隆的div。下面是它的工作原理：
var student_number = 1;
var orig_student = $("#student-1").clone();
$("#add-student-link").click(function() {
++student_number;
orig_student.appendTo('form.reg').attr('id', 'student-' + (stud
浏览 5提问于2013-03-03得票数 0
回答已采纳
2回答
使用jQuery，我尝试将datepicker事件处理程序添加到输入元素。
<div id="Box_tmpl" style="border:solid 1px #777; background:#ddd; display: none;">
<a class="remove-box" href="#">remove</a>
<div>
<label for="PeriodStart">Peri
浏览 0提问于2012-03-14得票数 0
回答已采纳
1回答
我必须在我的网站上，当第二份表格填写(点击保存按钮后)我复制这个表格，并将它插入第一份表格。不幸的是，当我提交此表单时，插入元素中的数据为空。
我的代码：
var objToCopy = $('.partnersForm').find('.modal-body').clone();
objToCopy.find('[name]').each(function(){
var objThs = $(this);
objThs.prop('name&#
浏览 1提问于2014-06-26得票数 0
回答已采纳
寻找从任何json调用自动生成JQuery列表视图的方法。我假设我会将结果加载到一个数组中，然后遍历键/值，然后根据结果的数量将结果填充到ul中，并使用li创建的结果.无法计算出如何获得键的长度，然后循环它们来填充<li>中的键和val。希望它在不需要知道任何json值的情况下工作。
以下是一个不起作用的起点：
$(document).ready(function(){
$.getJSON("json_mdb.php", function(data){
for (var i = 0; i < data.length; i++) {
$
浏览 10提问于2013-10-14得票数 1
回答已采纳
2回答
我有一段javascript，它设置数字输入值。然而，这是行不通的。调用后，输入的value字段仍然是空的(尽管输出元素的val()的console.log()确实显示了正确的值)。我尝试了三种方法来设置值jQuery的.val(总计)、.attr(' value‘、total)，以及普通的旧.value =，但仍然什么也没有。我甚至用html替换了整个元素，并将值连接到value属性中，这样就不能工作了。
知道为什么这不管用吗？
下面是标记：
<div id="proposal_price_box">
<div class="propos
浏览 0提问于2013-02-07得票数 1
回答已采纳
我有一个具有两个数组specialitiesOptions和specialities的toSpecialities对象，我将该对象从父组件发送到子组件
this.toSpecialities = { specialitiesOptions: specialities, specialities: this.exerciseFramework.specialities };
<ef-specialties [data]="toSpecialities"></ef-specialties>
在子组件中，我使用ngOnChanges来检测对象的变化
@Comp
浏览 18提问于2020-06-07得票数 3
回答已采纳
我想在AngularJs中创建一个可编辑的表。我在同一页中的另一个列表和详细信息视图中使用相同的日期。
我的疑问是，当我单击list details视图(页面中的Selected view section )部分中的编辑链接并修改textbox中的值时，直到我单击保存按钮时，它才会在表视图部分中更改，但是当我单击表节(页面中的可编辑表节)部分中的编辑并修改textbox中的值时，它是否也会在Selected View部分中更改。
但是，我希望在单击保存链接后更改所有值。请罚款样本代码，并建议我。
<!doctype html>
<html lang="en"
浏览 1提问于2014-05-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
