My current project involves using javascript to dynamically insert paragraphs inside a div element. Essentially, the script grabs the value entered into an input form when a button is clicked and adds it as a new paragraph within a specific div. However, I've encountered an issue where the margin of these inserted paragraphs is too large, and I'm unsure how to reduce it. Any suggestions on how to adjust the spacing in this scenario?
Here is a jsfiddle link for reference. Below is a snippet of my code:
HTML
<div id="red">
<button id="bt_1" onclick="addParagraph()">Add</button>
<form>
<input id="box_top" type="text" placeholder="Spacing is too big -->">
</form>
</div>
<div id="blue">
<!--Paragraphs with excessive margins are being added here. How can I adjust them?-->
<!--Type something in the input field and click the 'Add' button to see the spacing issue.-->
</div>
CSS
#blue {
height:100px;
width:250px;
margin-top: 10px;
float:left;
position:relative;
background-color:blue;
overflow:auto;
}
#red {
height:100px;
width:250px;
margin-top: 10px;
float:left;
position:relative;
background-color:red
}
form {
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#bt_1 {
margin-left:5px;
height:35px;
width:70px;
margin-top: 25px;
border-radius:5px;
}
JavaScript
function addParagraph() {
var word = document.getElementById("box_top").value;
var pMaker = document.createElement("p");
var nodeMaker = document.createTextNode(word);
pMaker.appendChild(nodeMaker);
var blueDiv = document.getElementById("blue");
blueDiv.appendChild(pMaker);
}