Question

我在javascript中遇到问题：我想基于HTML5模板创建一个元素，然后我想修改它。

以下是重现问题的最小代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <template id="tem">
            <a href="#">Test</a>
        </template>
        <script>
function instantiateTemplate(id) {
    var template = document.getElementById(id);
    var element = document.importNode(template.content, true);
    return template.parentNode.insertBefore(element, template);
}

var test = instantiateTemplate('tem');
test.textContent = 'Test2';
        </script>
    </body>
</html>

这是小提琴：https://jsfiddle.net/fzn3w02o/

正如您所看到的，如果您尝试它：链接保留其初始内容＆＃39;测试＆＃39;而我希望它是＆＃39; Test2＆＃39;。你怎么解释这个？

PS：对于这个例子，我可以在导入之前简单地修改模板，但为了管理事件，我需要在创建之后对其进行修改。

Answer 1

当您确实需要定位<template> nchor时，您定位<a>。

var anchor = document.querySelector('a');
anchor.textContent = 'plop!'

http://jgdoherty.org/Scripts/Emp.js

段

function instantiateTemplate(id) {
	var template = document.getElementById(id);
	var element = document.importNode(template.content, true);
	return template.parentNode.insertBefore(element, template);
}

var test = instantiateTemplate('tem');
var anchor = document.querySelector('a');
anchor.textContent = 'plop!'

	<body>
		<template id="tem">
			<a href="#">Test</a>
		</template>
	</body>

修改使用HTML5模板创建的元素

1 个答案:

段