Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

JavaScript and a little bit of Object Oriented Programming

innerHTML

  • Please log in to reply
9 replies to this topic

#1 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 08 December 2011 - 11:02 PM

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;
        }
  }

  • 0

#2 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 08 December 2011 - 11:55 PM

Create a span element like you did the div element, and then do
div.appendChild(span);

  • 0

#3 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 09 December 2011 - 06:56 AM

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.
  • 0

#4 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 09 December 2011 - 06:58 AM

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);

  • 0

#5 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 09 December 2011 - 07:10 AM

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>

  • 0

#6 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 09 December 2011 - 07:13 AM

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>

  • 0

#7 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 09 December 2011 - 07:15 AM

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

#8 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 09 December 2011 - 07:18 AM

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: ""

  • 0

#9 Stasonix

Stasonix

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 115 posts
  • Programming Language:C++, PHP, JavaScript, Delphi/Object Pascal, Pascal
  • Learning:C++, PHP, JavaScript, Delphi/Object Pascal

Posted 09 December 2011 - 07:21 AM

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

#10 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 09 December 2011 - 07:23 AM

*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 ^-^
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download