JavaScript and a little bit of Object Oriented Programming

#1
Stasonix

Posted 08 December 2011 - 11:02 PM

Learning Programmer

Members
82 posts

Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
Learning:C++, PHP, JavaScript, Delphi/Object Pascal

I have a constructor that create a div element, how can I add (insert or append) another element, for example a span into just created div, right in constructor


function godom() {

    this.create = function(){

     var domin = document.createElement('div');

          domin.className = 'test';

          return document.innerHTML = domin;

        }

  }

#2
wim DC

Posted 08 December 2011 - 11:55 PM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

Create a span element like you did the div element, and then do

div.appendChild(span);

#3
Stasonix

Posted 09 December 2011 - 06:56 AM

Learning Programmer

Members
82 posts

Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Indeed!!! I very thank to you, but my question seems have a continue, I wanna put a value into this span, any type (text, or int). watch this:

function godom() {

    this.create = function(){

     var domin = document.createElement('div');

          domin.className = 'test';

     var spanL = document.createElement('span');

          spanL.className = 'myclName';

 

          spanL.innerText = '10'; // IT WILL NOT WORK, WHY, and how to do it correctly?         

 

          domin.appendChild(spanL);

          return document.innerHTML = domin;

        }

  }

---------- Post added at 04:56 PM ---------- Previous post was at 04:51 PM ----------

Upsss!!! Very sorry for that, I've just watched Firebug, but even spans doesn't appear, ....
seems I went wrong way.

#4
wim DC

Posted 09 December 2011 - 06:58 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

All that stuff IS correct, it's just a wrong way of adding it to the body

return document.innerHTML = domin;

Should be something like:

document.body.appendChild(domin);

#5
Stasonix

Posted 09 December 2011 - 07:10 AM

Learning Programmer

Members
82 posts

Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Almost all good now, spans is in div, but spanL.innerText doesn't work, there must be a 10, but there is nothing:


<SCRIPT TYPE="text/javascript">

$(function(){

 

  function godom() {

     this.create = function(){

	    var domin = document.createElement('div');

		    domin.className = 'test';

		var spanL = document.createElement('span');

		    spanL.className = 'myclName';

                    spanL.innerText = '10'; // HERE NOT WORK

			domin.appendChild(spanL);

			return domin

	  }

   }

 

});

</SCRIPT>

#6
wim DC

Posted 09 December 2011 - 07:13 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

It does work ^^.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<script type="text/javascript">

	function init() {

		var div = document.createElement('div');

		div.className = 'test';

		

		var span = document.createElement('span');

		span.className = 'myclName';

		span.innerText = '10'; // IT WILL WORK


		div.appendChild(span);

		document.body.appendChild(div);

	}

	</script>

</head>

<body onload="init()">

</body>

</html>

#7
Stasonix

Posted 09 December 2011 - 07:15 AM

Learning Programmer

Members
82 posts

Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Ok! But I've just found the another, it must be spanL.textContent = '10', and ... WELL DONE!!!

#8
wim DC

Posted 09 December 2011 - 07:18 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

FYI, these are all the attributes. Some are functions tho (onclick etc)

span: HTMLSpanElement
attributes: NamedNodeMap
baseURI: ""
childElementCount: 0
childNodes: NodeList[0]
children: HTMLCollection[0]
classList: DOMTokenList
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
dataset: DOMStringMap
dir: ""
draggable: false
firstChild: null
firstElementChild: null
hidden: false
id: ""
innerHTML: ""
innerText: ""
isContentEditable: false
lang: ""
lastChild: null
lastElementChild: null
localName: "span"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "SPAN"
nodeType: 1
nodeValue: null
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
outerHTML: "<span></span>"
outerText: ""
ownerDocument: HTMLDocument
parentElement: null
parentNode: null
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
spellcheck: true
style: CSSStyleDeclaration
tabIndex: -1
tagName: "SPAN"
textContent: ""
title: ""
webkitdropzone: ""

#9
Stasonix

Posted 09 December 2011 - 07:21 AM

Learning Programmer

Members
82 posts

Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
Learning:C++, PHP, JavaScript, Delphi/Object Pascal

This is a very usefull thing!!! People, you're awesome!

#10
wim DC

Posted 09 December 2011 - 07:23 AM

Writes binary right handed and hex left handed

Members
2,084 posts

Programming Language:Java, JavaScript, PL/SQL
Learning:Java

*I forgot to mention these are all the attributes of a SPAN element ;).... Or maybe of ANY element and span uses some of them.. I'm actually not sure.

If you use chrome , and I'm pretty sure that if you use firefox + firebug combo, you can see the list yourself as well ^-^