向动态创建的元素添加ID

Question

I'm trying to add an id to an element that I create dynamically using javascripts' document.createElement() method. Basically I want to create an iframe in my html document and at the same time give that newly created element an id.

Here's my code so far. I've figured out how to put the element in the DOM and all that, i just need the id.

function build(content){
      var newIframe = document.createElement("iframe");

      var newContent = document.createTextNode("Hello World!");

      newIframe.appendChild(newContent);

      var element = document.getElementById("container");
      document.body.insertBefore(newIframe, element);

      document.getElementsByTagName("iframe").id = "active";
    };

As you can probably see, I have tried to give it an id at the very end. Problem is, it doesn't work.

So if anyone has any idea of what is wrong here, or an alternative way of doing what I want to do, please feel free to express yourself. Many thanks!

Answer 1

Just add an attribute ( id is an attribute) to that element directly , like this:

var newIframe = document.createElement("iframe");
newIframe.id = 'active';

... although it looks quite strange to have id equal to active (too generic for a unique identifier).

Your current approach doesn't work because document.getElementsByTagName("iframe") returns a collection of elements - NodeList or HTMLCollection (it's browser-dependant ). While you can assign a value to its id property, it won't do what you mean to. To make it work, you can adjust it this way:

document.getElementsByTagName("iframe")[0].id = "active";

... but, as shown above, there's a better way.

Answer 2

newIFrame.setAttribute("id", "something");