Jquery 从表单元素查询实时预览

我有一个表单，我希望在提交表单之前单击预览按钮后，在页面的其他位置以图形方式显示该表单。我写了以下内容：

         $('#preview').click(function() {
            var title = $('#inputTitle').attr('value');
            var location = $('#inputLocation').attr('value');

            $('.title').append(title);
            $('.location').append(location);                
        })

#inputTitle is a <input type="text"> from element
.title is an <h1> tag

$（“#预览”）。单击（函数（）{
var title=$（'#input title'）.attr（'value'）；
变量位置=$（'#inputLocation'）.attr（'value'）；
$（'.title'）。追加（title）；
$（'.location'）。追加（位置）；
})
#inputTitle是一个from元素
.标题是一个标签

这似乎有效，但是否正确使用？每次单击“预览”时，它只是将值添加到现有值中，而我需要先（在每次单击之前）将其删除或替换

谢谢

使用或代替

还请记住，使用类

.title

作为选择器将替换页面上该类的每个实例的内容，这可能不是您想要的。考虑使用一个ID选择器，它保证只匹配一次（或者从不匹配）。