在html里如何用js控制两个容器中的内容互相拖拽,如何优雅的用js动态添加html代码...

###三种方案：

1.使用DOM

//使用createElement创建元素

var dialog = document.createElement('div');

var img = document.createElement('img');

var btn = document.createElement('input');

var content = document.createElement('span');

// 添加class

dialog.className = 'dialog';

// 属性

img.src = 'close.gif';

// 样式

btn.style.paddingRight = '10px';

// 文本

span.innerHTML = '您真的要GG吗？';

// 在容器元素中放入其他元素

dialog.appendChild(img);

dialog.appendChild(btn);

dialog.appendChild(span);

2.使用HTML5 template标签>接着还是得使用DOM操作，只是不需要创建元素了，然后复制一份副本放入正文即可。

var dialog = document.querySelector('#dialog_tpl');

dialog.content.querySelector('img').src = 'close.gif';

dialog.content.querySelector('span').innerHTML = '您真的要GG吗？';

document.body.appendChild(dialog.content.cloneNode(true));

3.使用HTML模板有各种模板，并且按语法风格分类。其实模板大同小异，就是动态修改模板文件使之成为一个可用的静态HTML文件，其实你也可以自己在需要的地方加载一部分HTML。只需要使用ajax请求一个情态的HTML文件并把返回的HTML代码放入当前的HTML中即可。