CODEWITHSUNDEEP
javascripthtmlcss
GGSoft
GGSoft

Reputation: 429

Element created with script looks different

I have div block and one group of elements in it separated with fieldset tag. (I have added it manually). And there is a function which adds the similar group via script (on button click). Seems, in script, I have set elements properties, in same way, but it looks else. (distances between elements arn't equal.) Why does it happens? What's the reason?

I can make to correct this by css, but only the reason is interesting.

Entire HTML Code 

  <html>
  <head>
  <script type="text/javascript">

   function addGroup(){
     var parent=document.getElementById("myDiv");
     var fs=document.createElement("fieldSet");
     fs.style.borderRadius="7px"; 
     fs.style.height="45px";

     var l=document.createElement("legend");
     l.innerHTML="interval_0";
     l.style.color="darkgreen";
     l.style.fontStyle="italic";
     fs.appendChild(l);

     var d1= document.createElement("input");
     d1.type="date";
     d1.value='2014-05-01';
     fs.appendChild(d1);

     var d2= document.createElement("input");
     d2.type="date";
     d2.value='2014-05-22';
     fs.appendChild(d2);

     var txt= document.createElement("input");
     txt.type="text";
     txt.value='0';
     txt.size=12;
     txt.style.textAlign="right";
     fs.appendChild(txt);

     parent.appendChild(fs);
}

     </script>
     </head>
     <body>
       <input type="hidden" id="hd1" value="0"> </input>
       <button onclick="addGroup();"> AddGroup</button>
       <div id="myDiv" style="padding:7px;position:relative;margin-        top:15px;width:500px;height:500px;background-color:#ccbbcc;overflow-y:auto;border:1px red solid;border-radius:15px;">

        <fieldset style="border-radius:7px;height:45px;"><legend    style="color:darkgreen;font-style:italic;">Interval</legend> 
        <input type="date" value="2014-01-01"> <input type="date" value="2014-01-31">   <input type="text" size="12" value="0" style="text-align:right;"></input>
        </fieldset>
        </div>
        </body>
        </html>

Upvotes: 0

Views: 128

Answers (2)

amol
amol

Reputation: 1555

The elements created by dynamically dose not get any space between them, Its added dynamically in a single line like following code.

<label>From</label><input type="text" /><label>From</label><input type="text" />

You have to manage the space by css through margin.

Upvotes: 1

CKK
CKK

Reputation: 909

Spaces between elements differ. When you write HTML with whitespace characters (space, tab or line endings) it will be printed between elements and creates the margin between your inputs.

But when you create elements and append them with javascript, there will be no whitespace between these elements. You can create text nodes with spaces (http://www.w3schools.com/jsref/met_document_createtextnode.asp) or omit those spaces in your HTML markup.

Better, create your first group with calling same function. Remove html markup for initial fieldSet, and call addGroup bottom of body (for document to be ready to manipulate)

<html>
<head>
    <script type="text/javascript">

        function addGroup() {
            var parent = document.getElementById("myDiv");
            var fs = document.createElement("fieldSet");
            fs.style.borderRadius = "7px";
            fs.style.height = "45px";

            var l = document.createElement("legend");
            l.innerHTML = "interval_0";
            l.style.color = "darkgreen";
            l.style.fontStyle = "italic";
            fs.appendChild(l);

            var d1 = document.createElement("input");
            d1.type = "date";
            d1.value = '2014-05-01';
            fs.appendChild(d1);

            var d2 = document.createElement("input");
            d2.type = "date";
            d2.value = '2014-05-22';
            fs.appendChild(d2);

            var txt = document.createElement("input");
            txt.type = "text";
            txt.value = '0';
            txt.size = 12;
            txt.style.textAlign = "right";
            fs.appendChild(txt);

            parent.appendChild(fs);
        }

    </script>
</head>
<body>
<input type="hidden" id="hd1" value="0"> </input>
<button onclick="addGroup();"> AddGroup</button>
<div id="myDiv" style="padding:7px;position:relative;margin-        top:15px;width:500px;height:500px;background-color:#ccbbcc;overflow-y:auto;border:1px red solid;border-radius:15px;">
</div>
<script type="text/javascript">addGroup();</script>
</body>
</html>

By the way, you should concern using CSS classes.

Upvotes: 0

Related Questions