Javascript вставки содержимого из DIV в другой DIV

Я получил 2 дивы:Javascript вставки содержимого из DIV в другой DIV

<div id="a"> 
<div>html</div> 
<script>javascript</script> 
</div> 

<div id="b"> 
</div>

Я получаю содержимое из DIV и вставив его в b DIV с помощью этого:

var imgCont = document.getElementById('a').innerHTML; 
document.getElementById('b').innerHTML = imgCont;

Проблема в том, что она копирует только HTML без скриптов, но мне нужны сценарии, которые нужно скопировать. Я знаю, что строка var imgCont = document.getElementById('a').innerHTML; получает HTML и скрипты правильно (я просто протестировал ее, вставив alert(imgCont);), но вторая строка не вставляет скрипты. Может быть, я должен использовать что-то вместо innerHTML? Или, может быть, это сложнее, чем я думал? Может ли кто-нибудь помочь мне?

EDIT:

Итак, я думаю, что проблема где-то еще ... Я даю вам всю страницу, потому что я действительно путают ...

<?php 
require "setup.php"; 

$nameGet = $_GET['Result']; 

$page = $_GET['pg']; 
if(empty($page)){ 
$page = 0; 
} 
$urlGet="SELECT * FROM videos WHERE id='$nameGet'"; 
$theUrl=mysql_query($urlGet); 


while($row = mysql_fetch_array($theUrl, MYSQL_ASSOC)) 
{ 
    $mp4 = "{$row['mp4']}"; 
    $ogg = "{$row['ogg']}"; 
}; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Scoopoly</title> 
<link rel="stylesheet" href="res/style.css" /> 
<script type="text/javascript" src="res/plugins/jquery-1.7.1.min.js"></script> 
<link href="res/plugins/video-js/video-js.css" rel="stylesheet"> 
<script src="res/plugins/video-js/video.js"></script> 
<script type="text/javascript"> 
var pg = <?php echo $page ?>; 
var vid = new Boolean; 
var setup = new Boolean; 
function start() { 
setup = false; 
swichtoV(); 
} 
function swichtoV() { 
    var swichV = document.getElementById('swichV'); 
    var swichI = document.getElementById('swichI'); 
    swichV.style.fontSize = "70px"; 
    swichV.style.marginTop = "0px"; 
    swichV.style.marginLeft = "25px"; 
    swichI.style.fontSize = "40px"; 
    swichI.style.marginTop = "18px"; 
    swichI.style.marginRight = "54px"; 
    var vidCont = document.getElementById('vidList').innerHTML; 
    document.getElementById('slidesContainer').innerHTML = vidCont; 
    vid = true; 
    slideshow(); 
} 

function swichtoI() { 
    vid = false; 
    slideshow(); 
    var swichV = document.getElementById('swichV'); 
    var swichI = document.getElementById('swichI'); 
    swichV.style.fontSize = "40px"; 
    swichV.style.marginTop = "18px"; 
    swichV.style.marginLeft = "60px"; 
    swichI.style.fontSize = "70px"; 
    swichI.style.marginTop = "0px"; 
    swichI.style.marginRight = "12px"; 
    var imgCont = document.getElementById('imgList').innerHTML; 
    document.getElementById('slidesContainer').innerHTML = imgCont; 
    vid = true; 
    slideshow(); 
} 
var currentPosition; 
function slideshow(){ 
    if (!setup) { 
    currentPosition = pg; 
    setup = true; 
    } else { 
currentPosition = 0; 
    } 
    var cPos = (currentPosition * 720) * -1; 
    var slideWidth = 720; 
    var slideHold = document.getElementById('vidList'); 
var slides = $('div#slidesContainer div.slide'); 
    var numberOfSlides = slides.length; 

    // Remove scrollbar in JS 
    $('#slidesContainer').css('overflow', 'hidden'); 

    // Wrap all .slides with #slideInner div 
    slides 
    .wrapAll('<div id="slideInner"></div>') 
    // Float left to display horizontally, readjust .slides width 
    .css({ 
     'float' : 'left', 
     'width' : slideWidth, 
    }); 
    // Set #slideInner width equal to total width of all slides 
    $('div#slidesContainer div#slideInner').css('width', slideWidth * numberOfSlides); 
    $('div#slidesContainer div#slideInner').css('margin-left', cPos); 
    // Insert controls in the DOM 
    $('.control').remove(); 
    $('#slideshow') 
    .prepend('<a class="control" id="leftControl"></a><a class="control" id="rightControl"></a>') 

    // Hide left arrow control on first load 
    manageControls(currentPosition); 

    // Create event listeners for .controls clicks 
    $('.control') 
    .bind('click', function(){ 
    // Determine new position 
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; 
    pg = ($(this).attr('id')=='rightControl') ? pg+1 : pg-1; 
    // Hide/show controls 
    manageControls(currentPosition); 
    // Move slideInner using margin-left 
    $('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
    }); 
    }); 

    // manageControls: Hides and Shows controls depending on currentPosition 
    function manageControls(position){ 
    // Hide left arrow if position is first slide 
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } 
    // Hide right arrow if position is last slide 
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } 
    } 
}; 
</script> 
</head> 

<body class="visuals" onload="start()"> 
<div id="bHoldera"> 
<a class="wBa" href="web.php">web</a> 
<a class="aBa" href="audio.php">audio</a> 
<a class="vBa" href="visuals.php">visuals</a> 

</div> 
<?php 
if((!empty($mp4))&&(!empty($ogg))){ 
    echo " 
    <video id='my_video_1' class='video-js vjs-default-skin' controls 
    preload='auto' width='700' height='350' 
    data-setup='{}'> 
    <source src='res/videos/mp4/$mp4' type='video/mp4'> 
    <source src='res/videos/ogg/$ogg' type='video/ogg'> 
</video> 
"; 
} 
else { 
echo "<video id='my_video_1' class='video-js vjs-default-skin' controls 
    preload='auto' width='700' height='350' 
    data-setup='{}'> 
    <source src='res/videos/mp4/my_video.mp4' type='video/mp4'> 
    <source src='res/videos/ogg/my_video.ogg' type='video/ogg'> 
</video>"; 
} 
?> 

<div id="videoDiv"> 
</div> 
<div id="swichHolder"> 
<a class="swichB" id="swichV" onclick="swichtoV()">Videos</a> 
<div id="cross"></div> 
<a class="swichB" id="swichI" onclick="swichtoI()">Images</a> 
</div> 
<div id="menu"> 

<div id="slideshow"> 
    <div id="slidesContainer"> 

</div> 
</div> 

</div> 
<div id="vidList" style="display:none;"> 
<?php 
$query1 = "SELECT * FROM videos ORDER BY date"; 
$result1 = mysql_query($query1); 

$i = 0; 
echo '<div class="slide"><table id="menuT">'; 
while ($row = mysql_fetch_assoc($result1)){ 
    if ($i == 3){ 
     echo '</table></div><div class="slide"><table>'; 
     $i = 0; 
    } 
    echo "<td id='menutd'> 
<a class='menuLink' class='VV".$row['id']."'> 
<div id='II".$row['id']."' style='width: 230px; 
height: 136px; 
background: url(res/videos/img/".$row['img']."); 
background-size: contain; 
background-repeat: no-repeat; 
background-position:center;'></div> 
</a> 
</td> 
<script type='text/javascript'> 
.VV".$row['id'].".onclick = function() { 
var Result = '".$row['id']."'; 
location.href='visuals.php?Result=' + Result + '&pg=' + pg; 
    } 
</script> 
"; 
    $i++; 
} 
echo '</table></div>'; 
?> 
</div> 
<div id="imgList" style="display:none;"> 
<?php 
$query2 = "SELECT * FROM images ORDER BY date"; 
$result2 = mysql_query($query2); 

$i = 0; 
echo '<div class="slide"><table id="menuT">'; 
while ($row = mysql_fetch_assoc($result2)){ 
    if ($i == 3){ 
     echo '</table></div><div class="slide"><table>'; 
     $i = 0; 
    } 
    echo "<td id='menutd'> 
<a class='menuLink' id='VVi".$row['id']."'> 
<div id='IIi".$row['id']."' style='width: 230px; 
height: 136px; 
background: url(res/images/".$row['image']."); 
background-size: contain; 
background-repeat: no-repeat; 
background-position:center;'></div> 
</a> 
</td> 
<script type='text/javascript'> 
VVi".$row['id'].".onclick = function() { 
    alert('yes'); 
var Result = '".$row['id']."'; 
location.href='visuals.php?Result=' + Result + '&pg=' + pg; 
    } 
</script> 
"; 
    $i++; 
} 
echo '</table></div>'; 
?> 
</div> 
</body> 
</html>

источник

2012-02-04 Liukas

Кажется, что это работает, проверьте это: http://jsfiddle.net/7Qwaj/ –

Что вы подразумеваете под «скриптами»? – Jonathan

Я рекомендую использовать Firefox с плагином Firebug или Google Chrome и инструментами разработчика, чтобы увидеть ошибки Javascript (если есть). Оба они также позволяют вам пройти через код javascript по строкам. Я использую его каждый день, и он так быстро отлаживает такие проблемы. – ralfe

Вот как Я хотел бы сделать это (не используя innerHTML, ура!):

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 

     <style> 
      </style> 

    </head> 
    <body> 


     <div id="a"> 
      <div>html</div> 
      <script>alert("you'll only see this once")</script> 
     </div> 

     <div id="b"> 
     </div> 

     <script> 


      function whoAmI(el) { 
       alert("I'm element " + el.getAttribute("id")); 
      } 



      var a = document.getElementById("a"); 
      var b = document.getElementById("b"); 

      for(var i = 0, l = a.childNodes.length; i < l; i++) { 
       b.appendChild(a.childNodes[i].cloneNode(true)); 
      } 


      console.log(a); 
      console.log(b); 


      whoAmI(a); 
      whoAmI(b); 


     </script> 

    </body> 
</html>

Кроме того, я уверен, дублируя тег сценария не будет выполнять его содержимое. Вам нужно будет сделать это как-то вручную.

Редактировать: я обновил код, чтобы вы могли идентифицировать различные элементы div (предполагая, что это то, что вы хотели сделать).

источник

2012-02-04 13:37:18

Документы: https://developer.mozilla.org/En/DOM/Node.cloneNode –

@JaredFarrish - это только для справки или я сделал вопиющую ошибку в моем коде? :) –

Нет, я просто хотел добавить ссылку, если кто-то захочет ее просмотреть. ':)' –

Javascript вставки содержимого из DIV в другой DIV

ответ

Смежные вопросы