javascript将内容从div插入另一个div

时间：2012-02-04 13:29:23

标签： javascript html

我有2个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？或者它可能比我想象的更难？有人可以帮帮我吗？

编辑：

好的，所以我觉得问题出在其他地方......我给你整个页面，因为我真的很困惑...... 

<?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>

1 个答案:

答案 0 :(得分：0)

这是我将如何做到的（不使用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元素（假设这是您想要做的）。

相关问题
最新问题