Edit in JSFiddle

// Shadow DOMを使って、見た目の情報を隠す
var test1 = document.querySelector('#test1');
var shadow = test1.createShadowRoot();

// いちいちcreateElementなんてやってらんないよ!ってことで、HTML Templatesを使うる
var template = document.querySelector('#t-test');
var templateClone = document.importNode(template.content, true)
shadow.appendChild(templateClone);
<div id="test1">test1</div>
<div id="test2">test2</div>

<template id="t-test">
    <content></content>
</template>
div {
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 5px dashed #f0f;
    margin: 5px;
}