<label>
<input type="radio" name="field-value-1359303" value="Вася">Вася
</label>
<template id="myContent">
<div>
<h3>My</h3>
<p>Content</p>
</div>
</template>
<div><button type="button">Заменить</button></div>
const replaceText = element => {
const { childNodes } = element;
const replacement = document.getElementById('myContent').content;
// перед INPUT'ом есть ещё один текстовый узел: перенос строки и пробел
let isAfterInput = false;
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
if (node.nodeName === '#text') {
if (isAfterInput) {
node.parentNode.replaceChild(replacement, node);
}
} else if (node.nodeName === 'INPUT') {
isAfterInput = true;
}
}
}
document.querySelector('button')
.addEventListener('click', () => {
replaceText(document.querySelector('label'));
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.