Check Dom template ,
Элемент HTML Content Template () представляет собой механизм для хранения контента на стороне клиента, который не должен отображаться при загрузке страницы, новпоследствии может быть создан во время выполнения с использованием JavaScript.
<template> содержит один атрибут содержимого, обычно мы будем читать содержимое шаблона по этому атрибуту.так что вы можете добавить свой HTML в контент.
Если напрямую appendChild на <template>, вы можете распечатать html, то не найдете ничего уже добавленного.
Просто исправьте: просто измените dynamicTemplate.appendChild(childDiv) на dynamicTemplate.content.appendChild(childDiv)
, поскольку некоторые браузеры могут не поддерживать <template>, вам, возможно, придется вместо этого использовать <div>, а затем скрыть его.
PS: Я обнаружил, что некоторые документы говорят, что атрибут =содержимое <template> доступно только для чтения HTMLTemplateElement , вероятно, лучше использовать div вместо template.
Также также можно попробовать vue render () , это будет лучше для вашего случая.
function isSupportTemplate() {
return 'content' in document.createElement('template')
}
function createVueInstance(supported) {
if(supported) {//check browser whether support template
var dynamicTemplate = document.createElement('template');
dynamicTemplate.id = 'dynamicTemplate';
var childDiv = document.createElement('div');
childDiv.innerText = 'support <template>: {{text}}-{{text}}';
dynamicTemplate.content.appendChild(childDiv); //apend your html to template content
document.body.appendChild(dynamicTemplate)
var staticTemplate = document.getElementById('staticTemplate');
document.body.insertBefore(dynamicTemplate, staticTemplate);
}
else {
var dynamicTemplate = document.createElement('div');
dynamicTemplate.id = 'dynamicTemplate';
dynamicTemplate.style.display = 'none'
var childDiv = document.createElement('div');
childDiv.innerText = 'not support <template>: {{text}}-{{text}}';
dynamicTemplate.appendChild(childDiv); //append your html to template content
document.body.appendChild(dynamicTemplate)
var staticTemplate = document.getElementById('staticTemplate');
document.body.insertBefore(dynamicTemplate, staticTemplate);
}
new Vue({
el: '#firstPlaceholder',
template: '#staticTemplate',
data: {
text: 'My first text'
}
});
new Vue({
el: '#secondPlaceholder',
template: '#dynamicTemplate',
data: {
text: 'My second text'
}
});
}
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<button onclick="createVueInstance(isSupportTemplate())">Support Template</button>
<button onclick="createVueInstance(!isSupportTemplate())">Not Support Template</button>
<template id = "staticTemplate">
<div>{{text}}</div>
</template>
<div id ="firstPlaceholder"></div>
<div id ="secondPlaceholder"></div>
</body>
</html>