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">
    <span hoge1>test1</span>
    <span hoge2>test1_2</span>
    <span class="hoge3">test1_3</span>
    <span id="hoge4">test1_4</span>
    <span>test1_5</span>
</div>
<div id="test2">test2</div>

<template id="t-test">
    <content select="[hoge1]"></content>
    <content select="[hoge2]"></content>
    <content select=".hoge3"></content>
    <content select="#hoge4"></content>
    <content></content>
</template>

div {
    width: 300px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 5px dashed #f0f;
    margin: 5px;
}