Javascript Node Issue

[ziycon]

I have this code that doesn't work in FF due to a bug with the firstchild bit:

var opts = obj.childNodes;
  
var li = document.createElement('li');
var txt = document.createTextNode(opts[0].firstChild.firstChild.nodeValue);

And I want to replace it with the below, but I'm not sure how or what I pass to the function?

var opts = obj.childNodes;
  
var li = document.createElement('li');
var txt = document.createTextNode(opts[0].getFirstChild().getFirstChild().nodeValue);

function getFirstChild(elm){
    if ( !elm.childNodes.length ){
        return;
    }
    var children = elm.childNodes.length;
    for ( var i = 0; i <= children; ++i ){
        if ( elm.childNodes[i].nodeType == 1 ){
            return elm.childNodes[i];
        }
    }
    return;
}

[Dormilich]

I have this code that doesn't work in FF due to a bug with the firstchild bit

that’s not a bug, that’s standard compliant behaviour that IE gets wrong.

you can use .firstElementCh ild* in FF instead.

try {
    return elem.firstElementChild; // FF
} catch (e) {
    return elem.firstChild; // IE
}

you could even use elem.getElement sByTagName("*")[0], so you may not use method chaining on it as well.

one more thing to note: your getFirstChild() .nodeValue will either return null or undefined. an HTMLElement by default has no nodeValue (by definition), you would need .textContent/.innerText for that.


* - part of DOM-4-Core

[ziycon]

So if I was to keep its like this:

var opts = obj.childNodes;
  
var li = document.createElement('li');
var txt = document.createTextNode(opts[0].firstChild.firstChild.nodeValue);

All I need to do is:

var opts = obj.childNodes;
  
var li = document.createElement('li');
try {
   var txt = document.createTextNode(opts[0].firstElementChild.firstElementChild.nodeValue);
catch (e) {
   var txt = document.createTextNode(opts[0].firstChild.firstChild.nodeValue);
}

[Dormilich]

.firstElementCh ild.nodeValue is always null, see edited post above for an explanation why.

[ziycon]

I've tried the below two, maybe I'm misinterpreting what you said!? Neither worked in IE or FF.

var txt = document.createTextNode(opts[0].firstChild.firstChild.innerText);

var txt = document.createTextNode(opts[0].firstChild.firstChild.textContent);

[Dormilich]

innerText is for IE only.

what exactly is opts[0]? (I have an idea, but I’m not sure)

[ziycon]

Here is the whole function as it currently is.

function selectReplacement(obj) {
  document.getElementById('list').style.display= "none";
  var ul = document.createElement('ul');
  ul.className = 'singleList';
    
  var opts = obj.childNodes;
  
  var li = document.createElement('li');
  var txt = document.createTextNode(opts[0].firstChild.firstChild.nodeValue);

  li.appendChild(txt);
  
  li.onclick = function() {
	  if(document.getElementById('list').style.display=="block"){document.getElementById('list').style.display="none";}
	  else {document.getElementById('list').style.display="block";}
  }
  
  ul.appendChild(li);
  obj.parentNode.insertBefore(ul,obj);
}

[Dormilich]

what type of element is obj?

[ziycon]

Sorry, this is where its called from.

function setForm() {
  var s = document.getElementById('list');
  if(s = document.getElementById('list')){selectReplacement(s);}
}

Taken from here.

<ul style="display: none;" id="list" class="selectReplacement">
  <li>text 1</li>
  <li>text 2</li>
</ul>

[Dormilich]

then it would be obj.firstElemen tChild.textCont ent for FF (obj = <ul>, obj.firstElemen tChild = <li>)

[ziycon]

I'm using this code and it works grand in IE but FF gives the below error!?

try {
    var txt = obj.firstElementChild.firstElementChild.textContent;
  } catch (e) {
    var txt = document.createTextNode(opts[0].firstChild.firstChild.nodeValue);
  }

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLLIEle ment.appendChil d]" nsresult: "0x80570009 (NS_ERROR_XPC_B AD_CONVERT_JS)" location: "JS frame :: main.js :: selectReplaceme nt :: line 78" data: no]

[Dormilich]

that’s simple, .appendChild() requires a Node as input, not a String.

[ziycon]

So instead of:

li.appendChild(txt);

I tried:

li.appendChild(opts[0]);

li.appendChild(obj.firstElementChild.firstElementChild.textContent);

It didn't work though, what I'm trying to do is add the text from the first LI to to the li.appendChild code, any ideas where I'm going wrong?

[Dormilich]

any ideas where I'm going wrong?

yes. you still try to use a String instead of a text node.

be it IE, FF or any other browser, a text node is created by document.create TextNode("the text content");

[ziycon]

All working now, thank you so much for all your help, much appreciated. I've learned a lot with regards to nodes in JS.