如何将两个div合并为一个div

Question

我有两个 div 元素

<div id = "first">some details111</div>

并且

<div id = "second">some details222</div>

我想创建：

<div id ="New">some details111 some details222</div>

什么是最好和最快的方法来完成它？

- user2095956

Answer 1

使用jQuery可以实现这个功能：

$(document).ready(function(){
   $("body").append("<div id='New'></div>");
   $("#New").text($("#first").text() + " " +$("#second").text());
});

- red_alert

Answer 2

一些基础的 JS 代码：

// grab the content from our two divs
var content1 = document.getElementById('one').innerHTML;
var content2 = document.getElementById('two').innerHTML;

// create our new div, pop the content in it, and give it an id
var combined = document.createElement('div');
combined.innerHTML = content1 + " " + content2; // a little spacing
combined.id = 'new';

// 'container' can be whatever your containing element is
document.getElementById('container').appendChild(combined);

- Nick Tomlin

Answer 3

请尝试以下内容：

示例链接：http://jsfiddle.net/RYh7U/99/

如果您已经有一个ID为“NEW”的DIV，请尝试以下方法：

$('#New').html($('#first').html() + " " + $('#second').html())

如果您想创建一个div并添加内容，请按以下方式尝试。

$("body").append("<div id ='New'></div>")
$('#New').html($('#first').html() + " " + $('#second').html())

- Pandian

---

那样是行不通的，因为 $（'New'） 会尝试选择一个元素（并失败），而不是创建一个新的元素。 - Anthony Grist

同样的问题，div id="New"> 元素不存在；你仍在尝试（错误地）选择一个已存在的元素，而不是创建一个新的元素。 - Anthony Grist

@AnthonyGrist：这是你要的更改吗？现在代码没问题了吗？ - Pandian

Answer 4

使用jQuery，你可以这样做：

$("body").append(
    $('<div/>')
        .attr("id","New")
        .html(
            $("#first).html() + $("#second").html()
        )
);

- Wesley Schleumer de Góes

---

嗨，感谢你的帮助。我知道它创建了一个新的div，但是如何删除旧的div呢？ - user2095956

$("#first,#second").remove(); - Wesley Schleumer de Góes

Answer 5

$("<div></div>").attr("id", "New").html($("#first").html() + $("#second").html()).appendTo($("body"));

- youssDev