如何改变innerHTML内容，如(输入字段名称，id,onclick)属性

How to change innerHTML content such as(input field names,ids,onclick) attributes

本文关键字：id 属性 onclick 字段 内容 何改变 改变 innerHTML 输入      更新时间：2023-09-26

我想将一个div的所有内容复制到另一个div中，但在复制之前，我需要更改所有输入字段的名称和id。请看下面的代码:

 <div id="first_div">
    <input type="text" name="firstname" id="firstname">
    <select name="marital_status" id="marital_status">
        <option value="1" selected='selected'>Select</option>
        <option value="2">Single</option>
        <option value="3">Married</option>
   </select>
 </div>
 <div id="second_div">
 </div>

现在我想复制first_div的内容到second_div，但在复制之前我需要改变输入字段firstname到last_name，如何做到这一点?

我看到您在问题中标记了jQuery，您可以使用jQuery克隆方法快速入门:https://api.jquery.com/clone/

var clone = $("#first_div").clone();

然后修改clone innerHTML，如下所示

clone.find("#firstname").attr("id", "lastname"); // modifying div id
// do the same for every element you want to modify id, etc
//then finally append it to the second_div
$("#second_div").html(clone.html());

如果你想要一个普通的Javascript版本:

var clone = document.getElementById('first_div').cloneNode(true);
clone.querySelector('#firstname').id = 'lastname';
document.getElementById('second_div').innerHTML = clone.innerHTML;

如果您没有将jQuery添加到您的解决方案中，那么最好不要添加它，如果仅用于此。

使用纯javaScript

 var fdiv = document.getElementById("first_div");
 var clnNode = fdiv.cloneNode(true);
 var clnInput = clnNode.querySelector('#firstname');
 clnInput.setAttribute('id', 'lastname')
 var secDiv = document.getElementById('second_div')
 secDiv.innerHTML = clnNode.innerHTML;

直接复制内部html并替换id:

var html = document.getElementById('first_div').innerHTML;
html = html.replace(/firstname/g, 'last_name');
document.getElementById('second_div').innerHTML = html;
<div id="first_div">
  <input type="text" name="firstname" id="firstname">
  <select name="marital_status" id="marital_status">
    <option value="1" selected='selected'>Select</option>
    <option value="2">Single</option>
    <option value="3">Married</option>
  </select>
</div>
<div id="second_div">
</div>

相关文章：