使用<template>
元素可以在HTML中定义可复用的HTML模板。而JavaScript可以通过操作DOM来生成HTML块。下面是一个简单的示例:
<template id="myTemplate">
<div>
<h2>标题</h2>
<p>内容</p>
</div>
</template>
<div id="container"></div>
<script>
// 获取template元素
const template = document.getElementById('myTemplate');
// 克隆template元素并添加到DOM中
const clone = template.content.cloneNode(true);
document.getElementById('container').appendChild(clone);
</script>
上述示例中,我们使用<template>
元素定义了一个名为myTemplate
的HTML模板,并在模板中定义了一个<div>
元素及其子元素。接着,我们使用JavaScript获取了该模板元素,并通过cloneNode()
方法克隆了它的内容。最后,我们将克隆得到的内容添加到了具有id="container"
的<div>
元素中。
需要注意的是,我们在获取<template>
元素的内容时,使用了.content
属性,这是因为<template>
元素本身是不会被渲染的,它的内容需要通过.content
属性来获取。
另外,在使用JavaScript操作DOM生成HTML块时,我们需要使用一些重要的关键词,如document
、getElementById()
、appendChild()
等。这些方法和属性都是操作DOM的重要工具,需要熟练掌握。