Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    appendChild Line Break Question

    This question is quite rudimentary hence I am a newbie to JavaScript.
    How may I perform a line break / new paragraph break so it may show up as

    -BUTTON-

    Hello ASDF

    Hello ASDF

    Hello ASDF

    etc...



    Code:
    <head>
    <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
    function button()
    {
    
    	var txt = ("Hello ASDF");
    	var newtext = document.createTextNode(txt);
    	document.body.appendChild(newtext);
    
    }
    
    
    </SCRIPT>
    </head>
    
    <body>
    
    
    <a id="myAnchor"></a>
    <INPUT TYPE = "button" NAME = "button()" VALUE = "Hi" onclick = "button()"/>

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    You can add <p> elements to the page and style them accordingly in CSS:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    p
    {
    margin: 0;
    padding: 4px 0 0 0;
    }
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    function addElement(to,element_type,inner_html)
    	{
    	var new_elm = document.createElement(element_type);
    	if (new_elm)
    		{
    		new_elm.innerHTML = inner_html;
    		to.appendChild(new_elm);
    		return new_elm;
    		}
    	return null;
    	}
    
    function addPToBody()
    	{
    	addElement(document.getElementsByTagName("body")[0],"p","new line of text");
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <input type="button" value="add paragraph" onclick="addPToBody()" />
    
    </body>
    </html>
    You can try out different styles:
    Code:
    p
    {
    /*default browser p style*/
    }
    
    p
    {
    margin: 0;
    padding: 0;
    }
    
    p
    {
    margin: 0;
    padding: 0;
    display: inline;
    }
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •