Не. Такое преобразование понадобится только в том случае, если вы вручную что-то интерполируете в шаблоне. В этом случае просто позвольте DOM обработать это:
document.querySelectorAll('.append').forEach(button => {
button.addEventListener('click', e => {
let rel = e.target.getAttribute('rel'),
htmlContent = document.querySelector(`#${rel}`).value;
console.log(htmlContent, rel);
document.querySelector('#targetDiv').innerHTML += htmlContent;
});
});
.inputcontainer {
float: left;
width: 49%;
margin-bottom: 0.6em;
font-size: 12px;
}
.htmlvalue {
margin: 0.5em 0;
width: 230px;
font-size: 12px;
}
.append {
border-radius: 4px;
}
#targetDiv {
font-size: 12px;
border: 1px solid gray;
margin: 4px;
padding: 4px;
min-height: 1em;
min-width: 200px;
float: left;
display: block;
}
#targetDiv>div {
float: left;
display: inline-block;
font-size: 12px;
margin: 6px 4px;
padding: 4px;
}
#targetDiv .double {
border: 2px dotted blue;
}
#targetDiv .single {
border: 2px dotted green;
}
<div class="inputcontainer">
<input class="htmlvalue " id="input1" value='<div class="double">Double Quoted</div>'>
<button class="append" rel="input1">Append with " "</button>
</div>
<div class="inputcontainer">
<input class="htmlvalue " id="input2" value="<div class='single'>Single Quoted</div>">
<button class="append" rel="input2">Append with ' '</button>
</div>
<div id="targetDiv">
</div>