如何用JavaScript元素替換HTML元素或克隆它？

如何用JavaScript元素替換HTML元素或克隆它（不刪除HTML元素）？我浪費了很多時間試圖讓JavaScript代碼將：如何用JavaScript元素替換HTML元素或克隆它？

克隆HTML文本/創建新的JS文本
替換JS的文本框HTML文本而不刪除HTML文本/將HTML文本框的克隆放置在現有的HTML文本框上。

我找不到解決方案。

這裏的代碼 - > 我得到的輸出[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='[email protected]' ; 
document.getElementById('second').value='LecimyTutaj' ; 

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

</script>

我想隱藏背後的新的JavaScript現有的HTML文本框創建文本框，或通過使用Javascript創建它的克隆，但不刪除它。 :)對不起，如果我寫錯了什麼。

來源

2014-04-21 UpDown

請把你的問題輸入和輸出看起來像什麼;即向我們展示原始HTML，以及您希望它看起來的新HTML。 –

不要將代碼放入註釋中。正如你所看到的，它們是不可讀的。改爲編輯你的問題。 –

我不在計算機上，所以很難添加代碼示例來幫助您，但總的來說......製作一個HTML模型並在CSS中給它一個display:none（您將不會明確使用此塊不要在其中放入任何值...只是在這裏複製和粘貼）。給它一個像「myModel」的id。然後，您可以在該模型上使用cloneNode(true)，並將其作爲某個容器的子項添加多次。用你想要的任何值填充這些粘貼的實例。

如果在接下來的幾個小時內沒有人給您更有用的幫助，那麼我會在除手機以外的地方添加代碼示例。

來源

2014-04-21 19:50:48

-1

我假設你想動態添加更多的輸入字段。你需要某種觸發器，然後你可以使用JQuery的append函數。

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

來源

2014-04-21 19:54:11

OP沒有請求jQuery，你對上下文的性質以及是否存在可點擊觸發器做出完全無根據的假設。 -1 –

不，他想隱藏第一個，然後創建一個新的。這是最簡單的方法。他所要做的就是隱藏第一個輸入。那麼他就完成了 –

如果你使用的是jQuery，'$（'＃target'）。'（'＃'target'）。clone（））'' –

如何用JavaScript元素替換HTML元素或克隆它？

回答

相關問題