В следующем коде возник вышеописанный вопрос
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Learn English Words</title>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
}
header input{
border:none;
border-bottom:2px #9999FF solid;
text-align:center;
width:250px;
font-size:17px;
margin-top:5px;
}
header input:focus{
outline:none;
}
header input[type=submit]{
background-color:#CCCCFF;
color:white;
cursor:pointer;
}
header div{
width:760px;
margin:0 auto;
}
</style>
<script>
$(document).ready(function(){
var Word = $('input[name="AddWord"]').val();
var WordTranslation = $('input[name="AddTranslation"]').val();
$('input[type="submit"]').click(function(){
var newWord = $('<div><p class="word">Word</p></div>'); //ВОТ ТУТ ВОЗНИК ВОПРОС
$('div.words').append(newWord);
});
});
</script>
</head>
<body>
<header>
<div>
<input type="text" name="AddWord" placeholder="Add new word or expression">
<input type="text" name="AddTranslation" placeholder="Add translation">
<input type="submit" name="submit" value="Добавить">
</div>
</header>
<main>
<div class="words">
</div>
</main>
</body>
</html>