如何用JavaScript元素替换HTML元素或对其进行克隆？

Question

How to replace HTML element with JavaScript element or clone of it (without deleting the HTML element)? 如何用JavaScript元素替换HTML元素或对其进行克隆（而不删除HTML元素）？ I'm wasted a lot of time on trying to make JavaScript that will: 我在尝试制作可以实现以下目的的JavaScript上浪费了很多时间：

Clone HTML textbox / Create new JS textbox 克隆HTML文本框/创建新的JS文本框
Replace the HTML textbox with JS textbox without deleting the HTML textbox / Put Clone of HTML textbox on existing HTML textbox. 将HTML文本框替换为JS文本框，而不删除HTML文本框/将HTML文本框的克隆放在现有HTML文本框上。

I can't find the solution of this. 我找不到解决方案。

Here's code -> I'm getting [object HTMLInputElement] in output... 这是代码->我在输出中得到[object HTMLInputElement] ...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html lang="en">
  <body>
  <td><input class="inputtext" name="first" id="first" tabindex="1" type="text"></td>
  <td><input class="inputtext" name="second" id="second" tabindex="1" type="text"></td>

  </body>
</html>

  </body>
</html>

<script>
function replaceTargetWith( targetID, html ){
  var i, div, elm, last, target = document.getElementById(targetID);
  div = document.createElement('div');
  div.innerHTML = html;
  i = div.childNodes.length;
  last = target;
  while(i--){
    target.parentNode.insertBefore((elm = div.childNodes[i]), last);
    last = elm;
  }
  /// remove the target.
  target.parentNode.removeChild(target);
}
</script>


<script>


var p = document.getElementById("first");
    var p_prime = first.cloneNode(true);
    p_prime.id = "first123"
    p_prime.name = "first123"
    p_prime.value = "testtest"

    document.getElementById("first").appendChild(p_prime)

document.getElementById('first').value='emailtype@gmail.com' ;
document.getElementById('second').value='LecimyTutaj' ;

window.onload = function(){
  replaceTargetWith('first', document.getElementById('first123'));  
}

</script>

I would like to Hide an existing HTML textbox behind new JavaScript created Textbox, or clone of it created by Javascript without deleting it. 我想将现有的HTML文本框隐藏在新的JavaScript创建的文本框后面，或将其克隆由Javascript创建而不删除它。 :) Sorry if I wrote something wrong. :)对不起，如果我写错了。

Answer 1

I'm not at a computer, so it's hard to add code samples to help you but in general... make an HTML model and give it a display:none in CSS (you won't be using this chunk explicitly so don't put any values in it... it's just here to copy and paste from). 我不在电脑上，因此很难添加代码示例来为您提供帮助，但总的来说...创建一个HTML模型并display:none CSS中display:none （您不会显式使用此块，所以不要“ t在其中添加任何值...就在此处进行复制和粘贴。 Give it an id like "myModel". 给它一个像“ myModel”的ID。 Then you can cloneNode(true) on that model and add it as many times as you like as a child of some container. 然后，您可以对该模型进行cloneNode（true）并将其作为某个容器的子项添加任意多次。 Fill these pasted instances with whatever values you desire. 用所需的任何值填充这些粘贴的实例。

If no one gives you more useful help in the next few hours, I'll add a code sample when I'm somewhere other than my phone. 如果在接下来的几个小时内没有人为您提供更多有用的帮助，那么我将在手机以外的其他地方添加一个代码示例。

Answer 2

I am assuming you want to add more input fields dynamically. 我假设您想动态添加更多输入字段。 You will need some sort of trigger, then you can use the append function using JQuery. 您将需要某种触发器，然后可以使用JQuery使用append函数。

$("someBtnToTrigger").click(function(){
        $("#someForm > tbody:last").append("<td><input class='test123' name='test123'       
id='test123' tabindex='1' type='text'></td>");
        return false;

如何用JavaScript元素替换HTML元素或对其进行克隆？

问题描述

2 个解决方案

解决方案1
0 2014-04-21 19:50:48

解决方案2
-1 2014-04-21 19:54:11

如何用JavaScript元素替换HTML元素或对其进行克隆？

问题描述

2 个解决方案

解决方案1 0 2014-04-21 19:50:48

解决方案2 -1 2014-04-21 19:54:11

解决方案1
0 2014-04-21 19:50:48

解决方案2
-1 2014-04-21 19:54:11