자바스크립트에서 html 요소 객체를 복제하는 것이 가능합니까?

자바스크립트에서 html 요소 객체를 복제하는 것이 가능합니까?

테이블에 HTML 요소(예: 상자 선택 입력 필드)가 있습니다.이제 개체를 복사하여 복사본에서 새 개체를 생성하고 JavaScript 또는 jQuery를 사용합니다.어떻게든 될 것 같은데 지금은 좀 모르겠어요.

다음과 같은 것(의사 코드):

oldDdl = $("#ddl_1").get(); 

newDdl = oldDdl;

oldDdl.attr('id', newId);

oldDdl.html();

현대적인 접근 방식은 다음과 같은 기능을 사용하는 것입니다.

let new_element = element.cloneNode(true);

여기서 부울은 하위 노드도 복제할지 여부를 나타냅니다.

그런 다음 복제된 요소를 DOM에 추가할 수 있습니다.예를 들어, 를 사용하여 원래 요소 바로 뒤에 새 요소를 삽입할 수 있습니다.

element.after(new_element);

호환성:

Element.after에 대한 브라우저 호환성

Node.cloneNode에 대한 브라우저 호환성

코드를 사용하면 cloneNode() 메서드를 사용하여 일반 자바스크립트에서 다음과 같은 작업을 수행할 수 있습니다.

// Create a clone of element with id ddl_1:
let clone = document.querySelector('#ddl_1').cloneNode( true );

// Change the id attribute of the newly created element:
clone.setAttribute( 'id', newId );

// Append the newly created element on element p 
document.querySelector('p').appendChild( clone );

또는 jQuery clone() 메서드 사용(가장 효율적이지 않음):

$('#ddl_1').clone().attr('id', newId).appendTo('p'); // append to where you want

예, 한 요소의 자식을 복사하여 다른 요소에 붙여넣을 수 있습니다.

var foo1 = jQuery('#foo1');
var foo2 = jQuery('#foo2');

foo1.html(foo2.children().clone());

증거: http://jsfiddle.net/de9kc/

jQuery에서는 실제로 매우 쉽습니다.

$("#ddl_1").clone().attr("id",newId).appendTo("body");

물론 .appendTo()를 변경합니다...

clone() 메서드를 사용하여 복사본을 생성할 수 있습니다.

$('#foo1').html( $('#foo2 > div').clone())​;

여기서 만지작거림

복제할 요소의 HTML을 가져옵니다..innerHTML그리고 나서 그냥 새로운 물건을 만듭니다.createElement()...

var html = document.getElementById('test').innerHTML;
var clone = document.createElement('span');
clone.innerHTML = html;

일반적으로 clone() 함수는 cloner에 의해 코딩되거나 cloner에 의해 이해되어야 합니다.예를 들어, 다음과 같이 복제합니다.<div>Hello, <span>name!</span></div>복제본의 항목을 삭제한 경우<span>태그, 원본의 스팬 태그도 삭제해야 합니까?둘 다 삭제되면 개체 참조가 복제되고, 한 세트만 삭제되면 개체 참조가 새 인스턴스화됩니다.어떤 경우에는 하나를 원하고 다른 경우에는 하나를 원합니다.

HTML에서는 일반적으로 복제된 모든 항목이 참조적으로 자체적으로 포함되기를 원할 것입니다.이러한 새 참조가 올바르게 포함되도록 하는 가장 좋은 방법은 동일한 내부 참조를 사용하는 것입니다.HTML을 다시 실행하고 새 요소 내에서 브라우저가 다시 이해합니다.문제를 해결하기 위해 일하는 것보다 복제가 어떻게 이루어지는지 정확히 알아야 합니다.

전체 작업 데모:

function cloneElement() {
    var html = document.getElementById('test').innerHTML;
    var clone = document.createElement('span');
    clone.innerHTML = html;
    document.getElementById('clones').appendChild(clone);
}

<span id="test">Hello!!!</span><br><br>

<span id="clones"></span><br><br>

<input type="button" onclick="cloneElement();" value="Click Here to Clone an Element">

당신이 하려는 일에 대한 바닐라 JS 접근법

const oldDdl = document.querySelector('#ddl_1');

const newDdl = oldDdl.cloneNode(true);

oldDdl.setAttribute('id','newId');

const oldDdlHtml = oldDdl.innerHTML;

사용해 보십시오.

$('#foo1').html($('#foo2').children().clone());

한 줄로:

$('#selector').clone().attr('id','newid').appendTo('#newPlace');

선택기로 "#foo2"를 선택해야 합니다.그런 다음 html()로 가져옵니다.

html은 다음과 같습니다.

<div id="foo1">

</div>
<div id="foo2">
    <div>Foo Here</div>
</div>​

자바스크립트는 다음과 같습니다.

$("#foo2").click(function() {
    //alert("clicked");
    var value=$(this).html();
    $("#foo1").html(value);
});​

jsfidle은 다음과 같습니다. http://jsfiddle.net/fritzdenim/DhCjf/

언급URL : https://stackoverflow.com/questions/921290/is-it-possible-to-clone-html-element-objects-in-javascript