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

Question

I've got 2 divs: 我有2个div：

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

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

I'm getting the content from a div and inserting it into the b div using this: 我从div获取内容，并使用以下内容将其插入到b div中：

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

The problem is that it's copying only the HTML, without scripts, but I need the scripts to be copied. 问题是它只复制HTML，没有脚本，但是我需要复制脚本。 I know that the line var imgCont = document.getElementById('a').innerHTML; 我知道那行var imgCont = document.getElementById('a').innerHTML; gets the HTML and the scripts correctly (I just tested it by inserting alert(imgCont); ) but the second line is not inserting the scripts. 正确获取HTML和脚本（我只是通过插入alert(imgCont);进行了测试alert(imgCont);但第二行未插入脚本。 Maybe I should use something instead of innerHTML ? 也许我应该使用某些东西而不是innerHTML ？ Or maybe it's harder than I thought? 还是比我想的难？ Can anybody please help me? 有人可以帮我吗？

EDIT: 编辑：

Ok, so i think the problem is somewhere else... I'm giving you the whole page, because i'm really confused... 好的，所以我认为问题出在其他地方...我要给你整页，因为我真的很困惑...

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

Answer 1

Here's how I would do it (no using innerHTML , hurray!): 这是我的操作方式（不使用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>

Also, I'm pretty sure duplicating a script tag will not execute its contents. 另外，我很确定复制脚本标签将不会执行其内容。 You would need to do that manually somehow. 您将需要以某种方式手动进行操作。

Edit: I updated the code so that you could identify the different div elements (assuming that's what you wanted to do). 编辑：我更新了代码，以便您可以标识不同的div元素（假设这就是您要执行的操作）。

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

问题描述

1 个解决方案

解决方案1
0 2012-02-04 13:37:18

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

问题描述

1 个解决方案

解决方案1 0 2012-02-04 13:37:18

解决方案1
0 2012-02-04 13:37:18