createElement does not work

Question

what's wrong with my code..? the div with a anchor tag with a img does not popup in the section area when i call this function

function addLink(){

  if(localStorage.getItem('howManyLinks') >= 1){
    localStorage.setItem('howManyLinks', Number(localStorage.getItem('howManyLinks')) + 1);
  }
  else{
    localStorage.setItem('howManyLinks', '1');
  }

  var howManyLinks = localStorage.getItem('howManyLinks');

  var myNewLink = document.getElementById("link");
    localStorage.setItem('link'+howManyLinks, myNewLink.value);

  var myNewIcon = document.getElementById("icon");
    localStorage.setItem('icon'+howManyLinks, myNewIcon.value);

/* below here is where i have trubble */

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

  img.setAttribute('src','icon'+howManyLinks);
  a.setAttribute('href','link'+howManyLinks);

  section.appendChild(div);
  div.appendChild(a);
  a.appendChild(img);
}

And you're using it as a variable, unless you assign a particular `section` element to the variable named `section` all you have is an undefined variable error. Which should be evident in your browser's console. — David Thomas, Nov 17 '13 at 16:20
@Satpal When i did as you said something a "broken" img icon poped up for a second — Dwadelfri, Nov 17 '13 at 16:26
i can suggest you to just the line `section.appendChild(div)` to `document.getElementById("yoursectionId").appendChild(div);` — Pranav, Nov 17 '13 at 16:28
@DavidThomas If the markup includes an `id="section"`, [it should exist as a global](http://stackoverflow.com/questions/6381425/should-the-id-of-elements-be-made-global-variables-and). — Jonathan Lonowski, Nov 17 '13 at 16:28
@Jon: but that's a non-standard behaviour introduced by, if I recall correctly, IE (in its early days) and maintained for legacy reasons, with other browsers allowing it also. It is, though, poor practice to rely upon it, however. And there's no reason to believe that an element with that `id` *is* present in the HTML; especially since the function clearly/reportedly *doesn't work*. — David Thomas, Nov 17 '13 at 16:31
@user2971409 Are you getting any errors when trying to use `addLink()`? If so, can you include there messages? Also, would you be able to include a snippet of the markup related to `addLink()`? Perhaps with a small example in a [fiddle](http://jsfiddle.net/)? — Jonathan Lonowski, Nov 17 '13 at 16:42
@DavidThomas Yeah, I believe it started with IE. But, has actually been [drafted by the WHATWG](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem) as a required feature. And, of course, such an element may not be in the document. Thus, the "*if*" in my comment. :) Was just trying to say that it's not guaranteed to be `undefined`. — Jonathan Lonowski, Nov 17 '13 at 16:43

score 0 · Answer 1 · answered Nov 17 '13 at 16:42

To concentrate on your trouble part: This works with Firefox 25.0 / Linux:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <section id="section">
    </section>
    <script type="text/javascript">
        var div = document.createElement('div');
        var img = document.createElement('img');
        var a = document.createElement('a');
        var section = document.getElementById("section");

        img.setAttribute('src', 'dummyImg2.jpg');
        a.setAttribute('href', 'http://www.example.com');

        section.appendChild(div);
        div.appendChild(a);
        a.appendChild(img);
    </script>
</body>
</html>

createElement does not work

1 Answers1