新手村常驻居民 2021-10-27 11:25 采纳率: 15.9%
浏览 43
已结题

我实现了传递，但是只是传递了内容，没有吧整个div传递过去，我应该如何修改

img


<head>
    <meta charset="UTF-8">
    <title>
        
    </title>
    <style>
        #mydiv0{
                border: 1px solid red;
                overflow: auto;
                position: absolute;
                 width: 40%;
                 height: 70%;
        }
        #mydiv1{
            width: 50%;
            height: 20%;
            border: 1px solid red;
            margin-left: 20%;
        }
        #mydiv3{
            width: 50%;
            height: 20%;
            border: 1px solid red;
            overflow: auto;
            margin-left: 20%;
            margin-top: 20%;
            text-align: center;
        }
        #mydiv4{
            width: 50%;
            height: 20%;
            border: 1px solid red;
            margin-left: 20%;
                margin-top: 20%;
        }
        #mydiv5{
            width: 50%;
            height: 20%;
            border: 1px solid red;
            margin-left: 20%;
            margin-top: 20%;
        }
        #mydiv6{
            width: 50%;
            height: 20%;
            border: 1px solid red;
            margin-left: 20%;
                margin-top: 20%;
        }
    </style>
</head>
<body>
<div id="mydiv0">
<div class="" id="mydiv1" onclick="book()">点击传递
    <div  style="margin-left: 20px; width: 30px;height: 30px;border: 1px solid red;">123</div>
</div>

<div   id="mydiv3">居中<br/>居中<br/>居中<br/>居中<br/>居中<br/>居中<br/>居中<br/></div>


</div>


<div id="mydiv2" style=" position: absolute;left:56%; width: 40%;height: 70%; border: 1px solid red;">

</div>
</body>
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js" charset="UTF-8"></script>
    <script>
$(document).ready(function(){

    $("#mydiv1").click(function(){
        var firstDivContent = document.getElementById("mydiv1");
var secondDivContent = document.getElementById("mydiv2");
secondDivContent.innerHTML = firstDivContent.innerHTML;
    });
    $("#mydiv3").click(function(){
            var d3 = document.getElementById("mydiv3");
var d2 = document.getElementById("mydiv2");
d2.innerHTML = d3.innerHTML;
    });
});
        

    </script>
  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-10-27 14:09
    关注
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,
        .right {
            width: 400px;
            height: 500px;
            border: 1px solid red;
        }

        .box {
            width: 300px;
            height: 100px;
            overflow: auto;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="left">
        <div onclick="chuan()">传递

        </div>
        <div class="box" id="box">
            <ul>
                <li>
                    居中
                </li>
                <li>
                    居中
                </li>
                <li>
                    居中
                </li>
                <li>
                    居中
                </li>
                <li>
                    居中
                </li>
                <li>
                    居中
                </li>
            </ul>
        </div>
    </div>
    <div class="right">


    </div>
</body>
<script>
    function chuan() {
        let box = document.getElementById("box");
        let pbox = document.getElementsByClassName("left")[0];
        pbox.removeChild(box);

        let rbox = document.getElementsByClassName("right")[0];

        rbox.appendChild(box);

    }
</script>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • 彻底搞懂前端事件传递：从嵌套 div 的 click 说起
    2025-09-06 11:20
    会豪的博客 本文深入解析了前端事件传递机制，重点剖析了事件流的三个阶段：捕获（从外到内）、目标（到达实际元素）和冒泡（从内到外）。通过三层嵌套div的点击事件示例，直观展示了事件传递顺序
  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递
    2020-10-24 18:58
    通过以上步骤，我们可以实现仅在前端通过jQuery控制DOM节点和GET方法传递参数的功能，这对于开发无需服务器参与的交互功能非常有用。这种方法简化了前后端交互，提高了页面响应速度，但同时也需要注意数据安全问题，...
  • vue父组件向子组件(props)传递数据的方法
    2020-08-28 09:20
    但是，随着 Angularjs、React、Vue 等前端框架的流行，组件式的开发方式成为另一种不错的解决方案。 那么，Vue 中是如何实现父组件向子组件传递数据的呢？答案是使用 props。props 是 Vue 中的一种组件间通信方式，...
  • vue组件间的参数传递实例详解
    2020-10-17 02:28
    Vue 组件间的参数传递是前端开发中一个常见的问题，本文将详细介绍 Vue 组件间的参数传递，包括组件间的数据传递和事件传递。 一、组件间的数据传递 在 Vue 中，组件间的数据传递可以通过 props 实现。props 是 ...
  • ajax 动态传递jsp等页面使用id辨识传递对象
    2020-10-26 09:36
    在本文中，我们将深入探讨如何使用Ajax动态传递JSP页面，并通过JavaScript的Ajax编写来实现ID识别传递对象。 ### 1. 场景设定 假设我们有一个主页面`main.jsp`，该页面被分为左右两部分。左侧为导航菜单，包含一个...
  • Vue.js实战之组件之间的数据传递
    2020-10-20 02:11
    Vue.js 是一款流行的前端框架，它的核心特性之一就是组件化。在 Vue 应用中，组件之间需要频繁地进行数据交换以实现复杂的功能。本文将详细介绍如何在 Vue.js 中进行组件之间的数据传递。 首先，我们要明确 Vue ...
  • vue中各组件之间传递数据的方法示例
    2020-08-29 21:34
    在 Vue 中，由于组件实例的作用域是独立的，因此数据传递需要通过特定的方式来实现。以下是对 Vue 组件间数据传递的详细介绍： 1. **通过 Prop 传递数据** Prop 传递是 Vue 中父组件向子组件传递数据的标准方式。...
  • 详解如何使用router-link对象方式传递参数？
    2020-10-17 01:39
    在使用Vue.js框架开发单页面应用程序时，Vue Router是一个必不可少的插件，用于管理前端路由。路由中传递参数通常是一个需要掌握的重要知识点，这篇文章主要介绍了如何使用router-link对象的方式在Vue Router中传递...
  • php传递给前端的参数,详解前端在html页面之间传递参数的方法
    2021-04-04 08:33
    到处有战场真是烦的博客 因此跳转页面时，我们需要传递一个参数过去，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成页面。因此，通过a标签跳转的方式，肯定是行不通的。我们经常写form表单，提交时，可以传...
  • HTML页面跳转及参数传递问题
    2020-09-28 04:41
    HTML页面跳转及参数传递是前端开发中常见的操作，本文将详细介绍如何使用不同的方法实现页面跳转以及在跳转过程中如何传递参数。 首先，页面跳转可以通过多种方式进行。最简单的方法是使用a标签的href属性指定目标...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 11月4日
  • 已采纳回答 10月27日
  • 修改了问题 10月27日
  • 创建了问题 10月27日