Javascript-форум - Присвоить значения Дропдаун листа

Дорогие друзья возникла такая вот проблема, у меня имеется инпут, после него идёт Дропдаун лист с тегами, после чего Кнопка , При введении текста в инпут и выборе в дропдаун листе нужного нам тега, и нажатии на финальную кнопку, создаётся элемент и записывается текст импута в выбранном нам теге. Но мне так же нужно добавить дропдаун лист со значениями Color, Border и Margin. Принцип работы тот же , только добавляется выбранное значение и нового листа и выводится в тот же новосозданный элемент. Но я не могу задать Value, прошу помощи с данной задачей. А вот и мой код

<!DOCTYPE html>
<html>
<head>
<style>

.zap {
background-color: #4CAF50;
height: 54px;
color: white;
}

#barev:hover {
background-color: white;
background-image: none;
}
#barev {
height: 70px;
color:black;
border-color: black;
border-width: 0.1px;
/*background-image: url(http://glisa.ru/secret.php);*/
}

</style>
</head>
<body>
<input id="barev" type="text" name="lname" value=""><br><br>
<select id="bar">
<option disabled>YO</option>
<option id="pick" value="p">p</option>
<option value="h1" >h1</option>
<option value="div">div</option>
</select>
<select id="bar1">
<option value="">СТАЙЛЫ!</option>
<option value="">ЦВЕТОЧКИ</option>
<option value="Border">РАМОЧКИ</option>
<option value="Margin">РАЗМЕР ИМЕЕТ ЗНАЧЕНИЕ</option>
</select>

<button class="zap" onclick="myFunction()">Запоминалка</button></br></br>

<script>

function myFunction() {

var x = document.getElementById("bar");
var btn = document.createElement(x.value);
var x2 = document.getElementById("bar1");
var btn2 = document.createElement(x2.value);
var x1 = document.getElementById("barev");
var t = document.createTextNode(x1.value);
btn.appendChild(t);
document.body.appendChild(btn);
}

</script>

</body>
</html>