的JavaScript插入來自一個div的內容到另一個DIV

我有2周的div：的JavaScript插入來自一個div的內容到另一個DIV

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

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

我碰到一個div的內容和使用該其插入到b格：

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

問題是，它只複製HTML，沒有腳本，但我需要複製腳本。我知道行var imgCont = document.getElementById('a').innerHTML;正確地獲取HTML和腳本（我只是通過插入alert(imgCont);來測試它），但第二行沒有插入腳本。也許我應該用東西而不是innerHTML？或者，也許比我想象的更難？任何人都可以幫我嗎？

編輯：

好了，我認爲這個問題是別的地方...我給你的整個頁面，因爲我真的很困惑......

<?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/ – 2012-02-04 13:33:06

你是什麼意思的「腳本」？ – Jonathan 2012-02-04 13:33:35

我建議使用帶有Firebug插件的Firefox或谷歌瀏覽器和開發工具來查看Javascript錯誤（如果有的話）。它們都允許您逐行瀏覽JavaScript代碼。我每天都在使用它，並且使得調試問題如此之快。 – ralfe 2012-02-04 13:39:25

這裏是如何我會做（沒有使用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

Docs：https://developer.mozilla.org/En/DOM/Node.cloneNode – 2012-02-04 13:41:27

@JaredFarrish僅供參考還是我在我的代碼中犯了一個明顯的錯誤？ :) – 2012-02-04 13:45:03

不，我只是想添加參考，以防有人想要查看它。 '：）' – 2012-02-04 13:45:42

的JavaScript插入來自一個div的內容到另一個DIV

回答

相關問題