скопировать внутренний HTML из DIV и вставить его в другой DIV с JavaScript

Question

У меня есть этот элемент:

<div id="divOne"> 
<button class="close-menu">close</button> 
<ul> 
    <li>hello</li> 
</ul> 
</div> 

Я хочу, чтобы скопировать внутренний HTML из #divOne и вставить его в другой DIV при загрузке страницы.

Я использую этот код, но моя кнопка больше не работает.

document.getElementById('divTwo').innerHTML = document.getElementById("divOne").innerHTML; 

Спасибо

Answer 1

попробовать этот

document.getElementById('divTwo').innerHTML = document.getElementById("divOne").innerHTML;

<div id="divOne"> 
 
<button class="close-menu">close</button> 
 
<ul> 
 
    <li>hello</li> 
 
</ul> 
 
</div> 
 
<div id="divTwo"></div>

Answer 2

моя кнопка больше не работает.

Ну в этом случае вы должны передать событие в ближайший статический родителю или к document:

Я думаю, вы используете JQuery:

$(document).on('click', '.close-menu', function(e){ 
    console.log('clicked.'); 
}); 

Я хочу, чтобы скопировать внутренний HTML из #divOne и вставьте его в другой div при загрузке страницы.

Что вы выложили делает это наоборот вместо этого вы должны сделать это:

document.getElementById('divTow').innerHTML = document.getElementById("divOne").innerHTML; 

Answer 3

Вы должны delegate обработчик щелчка, что-то вроде

// handle clicks on all document buttons 
 
$(document).on('click', 'button', buttonClick); 
 
// copy #divOne html to #divTwo 
 
$('#divTwo').html($('#divOne').html()); 
 
       
 
// click handler demo 
 
function buttonClick(e) { 
 
    var result = $('#result'); 
 
    var id  = $(this.parentNode).attr('id'); 
 
    result.html('clicked button within: #' + id); 
 
    // comment @cssGeek demo 
 
    $('div').css('color', '#000'); 
 
    $('#'+id).css('color', 'red'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div id="divOne"> 
 
    <button class="close-menu">close</button> 
 
    <ul> 
 
     <li>hello</li> 
 
    </ul> 
 
    </div> 
 

 
    <div id="divTwo"></div> 
 

 
    <div id="result"></div>